Henry Peters Couto
Desenvolvimento de jogos em Python para a
educação
Araquari SC
Setembro de 2020
Henry Peters Couto
Desenvolvimento de jogos em Python para a educação
Instituto Federal Catarinense IFC
Câmpus Araquari
Bacharelado em Sistemas de Informação
Araquari SC
Setembro de 2020
Henry Peters Couto
Desenvolvimento de jogos em Python para a educação/ Henry Peters Couto.
Araquari SC, Setembro de 2020-
Instituto Federal Catarinense IFC
Câmpus Araquari
Bacharelado em Sistemas de Informação, Setembro de 2020.
1. Jogos. 2. Python. 3. PySide2. 4. Designer. I. Instituto Federal Catarinense. II.
Câmpus Araquari. III.Desenvolvimento de jogos em Python para educação
“Um processo educacional adequado equilibra a motivação
e o prazer de aprender com uma organização
clara, método e normas que fazem sentido.
(Andrea Ramal)
“A educão está sofrendo importantes mudanças
e a corrida pela implementação de processos
e ferramentas inovadoras começou
e consequentemente, a experiência dos alunos
para com as instituições.
(Gustavo Caetano, CEO da Sambatech e Samba Digital)
Resumo
O projeto tem como objetivo a criação de um tutorial de jogos em Python com Pyside2 e
QT Designer para a educação, sendo eles um jogo de memoria e outro de álgebra, que
foram bifurcados do TCC por ser muito longo.
Palavras-chave: Jogos. Arte. Python. PySide2. Designer.
Abstract
The project aims to create a Python game tutorial for education using Pyside2 and QT
Designer, being then a memory game and an algebra game, which were bifurcated from
the TCC for being too long.
Keywords: Jogos. Python. PySide2. Designer.
Lista de ilustrações
Figura 1 Instalador do Python no Windows 10 ................... 20
Figura 2 Criando o Main Windows ......................... 22
Figura 3 Main Windows ............................... 23
Figura 4 Removendo o menubar e statusbar .................... 23
Figura 5 Criando a Label ............................... 24
Figura 6
Imagem escolhida para servir de fundo das cartas, produzida por (GOD-
THESUPREME, 2019) .......................... 25
Figura 7
Imagem escolhida para servir de referencia de objeto contendo H2O,
nesse caso uma garrafa de água, produzida por (FREEPIK, ) ..... 25
Figura 8
Imagem escolhida para servir de referencia de objeto contendo CO2,
nesse caso a fumaça da cidade industrial, produzida por (NASA, ) . . 26
Figura 9
Imagem escolhida para servir de referencia de objeto contendo FE2O3,
nesse caso um cano de ferro enferrujado, produzida por (VISENTINI,
2012) .................................... 26
Figura 10
Imagem escolhida para servir de referencia de objeto contendo NACL,
nesse caso um recipiente de sal de cozinha, produzida por (JUHELE,
2018) .................................... 26
Figura 11
Imagem escolhida para representar o conjunto molecular H2O, produzida
por (Clip Art Max, ) ........................... 27
Figura 12
Imagem escolhida para representar o conjunto molecular CO2, produzida
por (OXINOXI, 2019) ........................... 27
Figura 13
Imagem escolhida para representar o conjunto molecular FE2O3, pro-
duzida por (GRAFIKAZPAZUREM, 2018) ............... 27
Figura 14
Imagem escolhida para representar o conjunto molecular NACL, produ-
zida por (PETRROUDNY, 2020) ..................... 27
Figura 15
Imagem escolhida para servir de conhecimento sobre água, produzida
por (Nova Vida Filtros, ) ......................... 28
Figura 16
Imagem escolhida para servir de conhecimento sobre dióxido de carbono
, produzida por (ARVOREAGUA, 2020) ................. 28
Figura 17
Imagem escolhida para servir de conhecimento sobre ferrugem, produ-
zida por (Detetives do Cosmos, 2021) .................. 29
Figura 18
Imagem escolhida para servir de conhecimento sobre sal de cozinha,
produzida por (DIABETES, 2020) .................... 29
Figura 19
Navegador de recursos encontrado no canto inferior direito do Qt Designer
31
Figura 20 Editor de Recursos ............................. 32
Figura 21 Editor de Recursos preenchido corretamente ............... 33
Figura 22 Definindo a imagem de fundo na label criada ............... 34
Figura 23 Definindo o cursor como ponteiro ..................... 35
Figura 24 Copiando duas labels ............................ 35
Figura 25 Copiando quatro labels ........................... 36
Figura 26 Criando a label e selecionando a mudança de texto com formatação . . 37
Figura 27 Definindo o texto formatado da label ................... 37
Figura 28 Visualização após sua criação ....................... 38
Figura 29 Visualização da previa do aplicativo ................... 39
Figura 30 Selecionando as labels para criar sua classe especial ........... 40
Figura 31 Criando sua classe especial chamada clicklabel .............. 41
Figura 32 Selecionando a classe especial para alterar seus sinais e receptores . . . 42
Figura 33 Interface de alteração de sinais e receptores ............... 43
Figura 34 Interface de alteração de sinais e receptores preenchida corretamente . 44
Figura 35 Promovendo as labels de imagem para a classe clicklabel ........ 45
Figura 36 Localização do editor de sinais e receptores ................ 46
Figura 37
Linkando o sinal click da clicklabel com o receptor agua da propria
clicklabel .................................. 47
Figura 38 Visualização dos labels após criar todos os links ............. 47
Figura 39 Minimizando a classe Ui_MainWindows no editor de textos Geany . . 59
Figura 40 Visuzalição da execução do programa no geany e seu funcionamento . . 62
Figura 41 Visualização do programa após mudança de fundo para agua ...... 64
Figura 42 Selecionando a centralwidget para promove-la .............. 66
Figura 43 Selecionando a classe especial novo_widget recém criada ........ 67
Figura 44 Selecionando change signals\slots na clicklabel .............. 75
Figura 45 Selecionando a função para deletar usando o sinal de menos ...... 76
Figura 46
Confirmando as mudanças, após ter deletado todas as funções e criado
em sue lugar a função mudar_face .................... 77
Figura 47 Selecionando todos os links ........................ 78
Figura 48 Visualização dos links após deletar e recria-los como mudar_face . . . 79
Figura 49 Criando nova widget ............................ 80
Figura 50 Abrindo o stylesheet e selecionando mudança de plano de fundo . . . . 80
Figura 51 Selecionando a cor do plano de fundo com o sistema RGB de cor . . . 81
Figura 52
Visualização da widget após setar sua cor para cinza com o rgb(170,170,170)
........................................ 82
Figura 53 Selecionando a Widget para promove-la ................. 83
Figura 54 Criando nova classe especial escondido .................. 84
Figura 55 Criando novo sinal mudar_informativo para a classe escondido ..... 85
Figura 56 Visualização da interface após mudar a widget escondido para o fundo 86
Figura 57
Criando os links entre o sinal click da clicklabels e o receptor mu-
dar_informativo da widget escondido ................... 87
Figura 58
Visualização dos links após criar os links entre a clicklabel e o widget
escondido .................................. 88
Figura 59 Criação de uma label comum com uma imagem de informativo ..... 88
Figura 60 Criação de botão .............................. 89
Figura 61
Alteração da cor do botão para branco com o rgb(240,240,240) utilizando
o stylesheet após ter mudado seu texto para continuar ......... 90
Figura 62 Habilitando a visualização dos sinais e receptores herdados da QWidget 91
Figura 63
Criação do link entre o sinal clicked do botão e o recptor hide da widget
escondido que fora herdado do QWidget ................. 92
Figura 64
Visualização dos links da interface, juntamente com a aba de sinais e
receptores .................................. 92
Figura 65
Visualização do erro de importação do QWidget após removido as linhas
de import ..................................105
Figura 66
Visualização do erro de importação do QLabel após removido as linhas
de import e adicionado o import do QWidget ..............105
Figura 67
Interface do jogo da memoria funcionando após três combinações corretas
117
Figura 68 Interface do jogo da memoria após combinar as cartas de CO2 . . . . . 118
Figura 69 Interface do jogo da memoria após vencer o jogo .............119
Figura 70
Imagem de abelha escolhida para substituir a variável X da equação de
algebra linear, produzida por (VECTEEZY, a) .............120
Figura 71
Imagem de abelha escolhida para substituir a variável Y da equação de
algebra linear, produzida por (VECTEEZY, b) .............121
Figura 72
Imagem de abelha escolhida para substituir a variável Z da equação de
algebra linear, produzida por (STOCKIO, ) ...............121
Figura 73
Imagem de play escolhida para adicionar a tela do vídeo, produzida
por (JOHN, 2019) .............................121
Figura 74
Imagem de abertura do vídeo, produzida por (Geoffrey Kater; Agro
Bayer Brasil, 2018) ............................122
Figura 75 Editor de recursos preenchido corretamente ...............123
Figura 76 Definindo o texto formatado de explicação do jogo ...........125
Figura 77
Criando label com a imagem de abelha com fundo transparente, e
selecionando o reset para recarregar as imagens .............126
Figura 78
Label com a imagem de abelha com fundo branco após recarregar as
imagens ...................................126
Figura 79 Copiando labels em conjunto para fazer sua copia ............127
Figura 80 Interface com todas as labels em seus devidos lugares ..........127
Figura 81 Selecionando para remover a imagem e seu conteúdo escalado . . . . . 128
Figura 82 Selecionando para formatar o texto da label ...............129
Figura 83
Formatação do número 2 para a label, seguindo o padrão centralizado,
negrito e fonte 48 ..............................129
Figura 84
Visualização da interface após mudar o primeiro valor de abelha para o
número 2 ..................................130
Figura 85
Selecionando as posições do Y para mudar de abelha para a imagem de
flor ......................................130
Figura 86 Visualização após mudar as imagens para flor ..............131
Figura 87
Visualização após mudar as imagens faltantes para o número 2, conforme
feito anteriormente na figura 84 ......................132
Figura 88
Selecionando as posições de igualdade, após remover a imagem e seu
conteúdo escalado, juntamente com a seleção de sua formatação de texto
133
Figura 89
Formatação do sinal de igualdade, seguindo o padrão centralizado,
negrito e fonte 48 ..............................133
Figura 90
Visualização após mudar as imagens de abelha para o sinal de igualdade
134
Figura 91 Visualização após mudar as imagens de abelha para o sinal de menos . 135
Figura 92 Visualização após mudar as imagens de abelha para a imagem de mel . 136
Figura 93 Visualização após mudar as imagens de abelha para o sinal de positivo 137
Figura 94 Visualização após mudar as imagens de abelha para o número 1 . . . . 138
Figura 95 Visualização após mudar as imagens de abelha para o número 7 . . . . 139
Figura 96 Visualização após mudar as imagens de abelha para o número 3 . . . . 140
Figura 97
Visualização após mudar as imagens de abelha para o sinal de multiplicação
141
Figura 98 Criando o Line Edit ............................142
Figura 99
Ajustando o tamanho do Line Edit para o tamanho da imagem de abelha
143
Figura 100 Selecionando o Line Edit para mudar seu estilo .............143
Figura 101 Selecionando para adicionar uma nova fonte ...............144
Figura 102 Definindo a nova fonte com arial, black, tamanho 40 ..........144
Figura 103 Visualização do editor de estilos após adicionar a nova fonte ......145
Figura 104 Copiando a Line Edit para as outras posições de abelha ........145
Figura 105 Selecionando todas os Line Edit ......................146
Figura 106 Visualização da interface após mudar todos os Line Edit para o fundo . 146
Figura 107 Selecionando manualmente cada imagem de abelha e as deletando . . . 147
Figura 108 Visualização da interface após arrumar os Line Edit ...........147
Figura 109
Visualização da interface após recarregar as imagens, fazendo as imagens
de abelha ficarem com fundo transparente ................149
Figura 110 Promovendo centralwidget para widget_principal ............149
Figura 111 Criando botão ................................150
Figura 112
Mudando texto e estilo de fonte do botão para Verificar com fonte arial,
black, tamanho 40 .............................150
Figura 113 Selecionando o Line Edit para mudar seu nome .............151
Figura 114 Selecionando a aba de sinais e receptores do canto inferior direito . . . 152
Figura 115
Selecionando a criação de novo sinal na aba de sinais e receptores do
canto inferior direito ............................152
Figura 116
Visualização da barra de tamanho do texto na aba de sinal e receptores,
com tamanho pequeno ...........................153
Figura 117
Selecionando o botão verificar, como quem envia após estender o tama-
nho do texto, tornando-o visível ......................154
Figura 118 Selecionando o sinal clicked() do botão verificar .............155
Figura 119 Selecionando a widget_principal, como quem vai receber o sinal . . . . 156
Figura 120 Selecionando o receptor verificar() da widget_principal .........157
Figura 121
Visualização da aba de sinais e receptores, após fazer a criação do link
entre o botão verificar e a widget_principal ...............158
Figura 122
Criação da widget, e definindo sua cor para cinza com o rgb(170,170,170)
159
Figura 123 Selecionando a widget para promove-la para escondido .........159
Figura 124 Adicionando os sinais da widget escondido ................160
Figura 125
Copiado a botão verificar para a widget escondido e selecionado a edição
de estilo do botão, removido seu conteúdo, para recria-lo ........161
Figura 126 Adicionado plano de fundo para o botão .................161
Figura 127 Adicionando uma fonte para o botão sendo arial, black, tamanho 40 . . 162
Figura 128
Visualização do estilo do botão com duas linhas, sendo cor de fundo e
fonte .....................................162
Figura 129
Visualização do estilo do botão com cor de fundo e fonte, em uma única
linha .....................................163
Figura 130 Criando a barra de rolagem para o vídeo .................164
Figura 131 Criando label e definindo sua imagem como play ............165
Figura 132
Visualização da interface da widget_escondida, após criação da label
com a imagem do play ...........................165
Figura 133
Visualização da interface da widget escondido, após mudar a cor de
fundo da label com a imagem do play para preto rgb(0,0,0) ......166
Figura 134
Selecionando a label da imagem do play, para promove-la para clicklabel
167
Figura 135 Adicionando o sinal click(), para a classe especial clicklabel .......167
Figura 136 Selecionando a barra de rolagem, para promove-la para media_slider . 168
Figura 137
Adicionando os receptores duration_changed() e position_changed(),
para a classe especial media_slider ....................168
Figura 138
Visualização da interface após mudar o nome do botão de verificar para
fechar ....................................169
Figura 139 Criando widget e definindo sua cor de fundo para preto rgb(0,0,0) . . . 170
Figura 140 Promovendo a nova widget para a classe especial video .........170
Figura 141 Adicionando o sinal click() para a classe especial video .........171
Figura 142 Selecionando a widget video, para move-la para o fundo ........171
Figura 143
Visualização da interface após mover a widget video para o fundo,
tornando o label de play visível ......................172
Figura 144
Criando link entre o sinal click() da label do play e o receptor play_video()
da widget escondido ............................173
Figura 145
Criando link entre o sinal click() da widget video e o receptor play_video()
da widget escondido ............................173
Figura 146
Criando link entre o sinal sliderMoved() da barra de rolagem me-
dia_slider e o receptor set_position() da widget escondido .......174
Figura 147
Criando link entre o sinal clicked() do botão fechar e o receptor close()
da MainWindow, que precisa ser herdado do QWidget .........174
Figura 148
Criando link entre o sinal clicked() do botão fechar e o receptor close()
da MainWindow, após habilitar a visualização dos sinais e receptores
da QWidget .................................175
Figura 149
Criando novo aplicativo, com uma label e selecionando para criar um
texto formatado ...............................190
Figura 150
Definindo o texto formatado a ser usado na caixa de mensagem, com
sua formatação centralizada com tamanho 20 nas duas primeiras li-
nhas, pontuação em negrito e sua terceira linha inteira em negrito com
tamanho 28 .................................190
Figura 151 Copiando o digo HTML, gerado pela formatação do texto ......191
Figura 152 Visualização do jogo finalizado ......................198
Figura 153
Visualização das respostas corretas em verde e desabilitadas, e a resposta
errada em vermelho .............................198
Figura 154
Visualização da mensagem após responder todos os três valores correta-
mente ....................................199
Figura 155
Visualização da interface com o vídeo antes de clicar com o mousse para
começar a tocar ...............................199
Figura 156 Visualização do vídeo em andamento ...................200
Lista de tabelas
Tabela 1 Formula de álgebra linear a ser usada, com sua quantidade de casas . . 124
Tabela 2 Resolução da primeira linha da formula .................124
Tabela 3 Resolução da segunda linha da formula ..................124
Tabela 4 Resolução da terceira linha da formula ..................124
Lista de digos
digo 1 Comando utilizado para atualizar o pip para a ultima versão disponível 20
digo 2 Comando utilizado para instalar o PySide2 na ultima versão disponível 21
digo
3
Comando utilizado para instalar o Qt Designer na ultima versão disponível
21
digo
4
Comando utilizado para instalar o PyInstaller na ultima versão disponível
21
digo 5 Comando utilizado para verificar o local da pasta do Python ...... 21
digo
6
Comando utilizado para converter arquivos .qrc para .py, nesse caso
converter unico.qrc para recursos.py ........................ 48
digo
7
Comando utilizado para converter arquivos .ui para .py, nesse caso
converter interface.ui para interface.py ...................... 48
digo 8 digo unico.qrc criado no QT Designer ................. 48
digo
9
digo interface.ui abreviado por ser grande que fora criado no QT
Designer ....................................... 49
digo
10
digo abreviado por ser muito grande que fora gerado ao converter as
imagens do unico.qrc em linguagem do Python, após execução do comando 6 50
digo
11
digo gerado ao converter o interface.ui em linguagem do Python,
após execução do comando 7 ........................... 51
digo 12 Criando os importes generalizado para o aplicativo ........... 53
digo 13 Abrindo o código da interface para copiar sua classe .......... 54
digo 14 O código aplicativo.py após fazer copiar a classe da interface ...... 56
digo 15 Criação da clicklabel, MainWindows e seu inicializa-dor ........ 60
digo 16 Alteração da função do receptor agua para trocar sua imagem ..... 62
digo 17 Criação da classe novo_widget ...................... 67
digo
18
Alteração da função do receptor agua para fazer suas comparações com
as cartas viradas, para verificar se é uma combinação .............. 68
digo 19 Novo importes com time e random .................... 72
digo 20 Adicionando uma lista para o novo_widget ............... 72
digo 21 Alterando o inicializador do clicklabel para torna-lo aleatório ..... 72
digo
22
Nova classe Ui_MainWindow gerada pelas mudanças da interface, com
comentário da parte a ser prestado atenção .................... 94
digo
23
Classe clicklabel arrumado com a utilização dos self e com uma única
função mudar_face ................................. 97
digo
24
Criação da classe escondido, definindo sua inicialização oculta e alteração
da função de colorir, conforme encontrado em (USER7797, 2013), alteração
da função de esconder, e criação do receptor mudar_informativo ........101
digo 25 Alteração dos importes generalizados para apenas os necessários . . . . 105
digo 26 Código completo do jogo da memoria ..................106
digo
27
Comando utilizado para converter o arquivo aplicativo.py em um
executável individual ................................119
digo
28
Comando utilizado paraconverter arquivos .qrc para .py, nesse caso
converter recursos.qrc para recursos.py ......................175
digo
29
Comando utilizado para converter arquivos .ui para .py, nesse caso
converter interface.ui para interface.py ......................175
digo 30 Criando os importes generalizados para o aplicativo ...........176
digo 31 Criando função de correção do caminho para arquivos externos . . . . 176
digo 32 Código da classe Ui_MainWindow criada no QT Designer .......177
digo 33 Criando classe especial valores, e a classe especial clicklabel ......184
digo
34
Criando a classe especial widget_principal, onde se faz as verificações
se os valores estão corretos .............................186
digo
35
digo HTML gerado, na aba de text após confirmar a formatação do
texto no QT Designer, conforme imagem 151 ...................191
digo 36 Código 35, após realizar a indentação das linhas ............191
digo 37 Linha 75 do código 34 a ser mudada pelo digo 35 ...........192
digo
38
Visualização de como deve ficar a linha 75 do digo 34 após ter seu
conteúdo mudado pelo digo 35 .........................192
digo
39
Criando a classe especial escondido, Criando em seu inicializa-dor o
tocador de vídeo e definindo que não é visível, Criando a função de repintar,
criando as funções play_video, mediastate_changed e set_position . . . . . . 193
digo
40
Criando as classes media_slider e video, fazendo o link entre eles e o
video player encontrado na widget escondido ...................195
digo 41 Python ...................................197
digo
42
Cópia dos importes encontrados no jogo da memoria no digo 25,
removendo os importes não necessários, sendo eles QEventLoop e QTimer do
PySide2.QtCore e o QCursor do PySide2.QtGui .................200
digo 43 Alteração dos importes generalizados para apenas os necessários . . . . 201
digo 44 Código completo do jogo de álgebra linear ................201
digo
45
Comando utilizado para converter o arquivo aplicativo.py em um
executável individual ................................216
Lista de abreviaturas e siglas
PhD Doctor of Philosophy
IFC Instituto Federal Catarinense
IFC-CA Instituto Federal Catarinense Campus Araquari
H2O Monóxido de di-hidrogênio, água
NaCl Cloreto de dio, sal de cozinha
CO2 Dióxido de carbono, fumaça
Fe2O3 Óxido de ferro, ferrugem
H Hidrogénio
O Oxigénio
qrc Qt Resource System
py Python Script
ui User Interface
TCC Trabalho de conclusão do curso
Sumário
1 INTRODUÇÃO ............................. 18
2 DESENVOLVIMENTO DOS JOGOS ................. 19
2.1 Instalação de programas .......................... 19
2.1.0.1 Comandos ................................... 20
2.1.1 Arrumando o Python ............................. 21
2.2 Desenvolvimento do jogo da memoria .................. 21
2.2.1 Arrumando a MainWindows ......................... 22
2.2.2 Criação da Label ............................... 23
2.2.3 Imagens a serem utilizadas no jogo da memoria ............... 24
2.2.3.1 Imagem de Fundo da Carta .......................... 25
2.2.3.2 Imagens de matéria .............................. 25
2.2.3.3 Imagens de molécula .............................. 27
2.2.3.4 Imagens de conhecimento ........................... 28
2.2.4 Criação do repositório de imagens ...................... 30
2.2.5 Criando as labels de imagem e texto ..................... 33
2.2.6 Configurando as labels ............................ 39
2.2.7 Arrumando os sinais e receptores ....................... 45
2.2.8 Criando o primeiro digo aplicativo.py ................... 48
2.2.8.1 Comandos de conversão ............................ 48
2.2.8.2 digos gerados pelo QT Designer ....................... 48
2.2.8.3 digos gerados após a utilização dos comandos de conversão ......... 50
2.2.8.4 Criando os importes e copiando a interface convertida para o aplicativo.py ... 53
2.2.8.5 Criando a clicklabel juntamente com a configuração do aplicativo ........ 59
2.2.8.6 Alterando a função do receptor para trocar a imagem da carta ......... 62
2.2.8.7 Alterando a função do receptor para fazer as comparações ........... 64
2.2.9 Criando o segundo digo aplicativo.py ................... 71
2.2.10 Finalizando a interface ............................ 74
2.2.10.1 Criação da nova widget escondido ....................... 79
2.2.10.2 Criação dos links e a label da widget escondido ................. 85
2.2.10.3 Criação de botão na widget escondido e a criação do link entre eles ....... 89
2.2.11 Criando o terceiro e ultimo digo aplicativo.py ............... 93
2.2.12 Arrumando últimos detalhes para criação do executável ...........103
2.3 Desenvolvimento do jogo de álgebra linear ...............119
2.3.1 Vídeo e imagens a serem utilizadas no jogo de álgebra linear ........120
2.3.2 Criando o repositório recursos.qrc ......................122
2.3.3
Criação da label de informativo do jogo, e definindo a equação matemática
a ser utilizada .................................123
2.3.4 Criando as labels de imagem e texto para as formulas de álgebra linear ...125
2.3.5 Mudando as imagens de abelha para seus respectivos valores ........128
2.3.5.1 Mudando de abelha para flor ..........................130
2.3.5.2 Mudando de abelha para o número 2 ......................131
2.3.5.3 Mudando de abelha para o sinal de igualdade ..................132
2.3.5.4 Mudando de abelha para o sinal de negativo ..................134
2.3.5.5 Mudando de abelha para a imagem de mel ...................135
2.3.5.6 Mudando de abelha para o sinal de positivo ..................136
2.3.5.7 Mudando de abelha para o número 1 ......................137
2.3.5.8 Mudando de abelha para o número 7 ......................138
2.3.5.9 Mudando de abelha para o número 3 ......................139
2.3.5.10 Mudando de abelha para o sinal de multiplicação ................140
2.3.6 Criação dos QLine Edit ............................141
2.3.7 Arrumando os componente da interface, label, botão, e Line Edit ......148
2.3.8 Criando link manualmente entre o botão verificar e a widget_principal ...151
2.3.9 Criando a widget escondido .........................158
2.3.10 Criação dos componentes da widget_escondida ...............160
2.3.10.1 Criação do botão da widget_escondida .....................160
2.3.10.2 Criação da barra de rolagem da widget_escondida ...............163
2.3.10.3 Criação da label play, para o tocador de vídeo da widget_escondida .......164
2.3.11
Promovendo os componentes da widget_escondida e mudando o nome da
botão .....................................166
2.3.11.1 Promovendo a label da imagem do play para uma clicklabel ...........166
2.3.11.2 Promovendo a barra de rolagem para media_slider ...............167
2.3.11.3 Mudando o texto do botão para Fechar .....................169
2.3.12 Criação da widget para tocar vídeo ......................169
2.3.13 Criação dos links da widget_escondida ....................172
2.3.14 convertendo os arquivos ...........................175
2.3.15 Criando os importes para o aplicativo.py ...................175
2.3.16 Criando a função de conversor de caminho ..................176
2.3.17 Copiando a interface convertida para o aplicativo.py .............177
2.3.17.1 Criando as classes valores e clicklabel ......................184
2.3.18 Criando a classe widget_principal ......................185
2.3.18.1 Criando o texto formatado ...........................189
2.3.18.2 Arrumando o msgBox.setText() para o texto formatado .............191
2.3.19 Criando as classes especiais ..........................192
2.3.20 Criando a classe escondido ..........................192
2.3.21 Criando as classes media_slider e video ...................195
2.3.22 Criando o MainWindows e a inicialização do programa ...........197
2.3.23 Visualização do jogo de álgebra linear funcionando .............197
2.3.24 Arrumando últimos detalhes para criação do executável ...........200
2.3.25 Criação do executável individual .......................216
2.4 Conclusão do capitulo 2. .........................217
3 CONCLUSÃO ..............................218
REFERÊNCIAS .............................219
18
1 Introdução
Este projeto foi criado por ventura do TCC ter ficado muito extenso, separando
o tutorial de criação dos jogos nesse projeto, o projeto inicial se verificava a necessidade
visual dos alunos, por mais variadas causas, desde desinteresse, até mesmo dificuldade de
aprender. Para muitas pessoas aprender é algo entediante e desinteressante, ou muitas vezes
difícil, por mais que estude não consegue entender o assunto e logo o acaba esquecendo,
fazendo com que desistam dos estudos ou apenas estudar no ultimo dia apenas para passar
numa prova, pois acredita que não vai conseguir aprender, uma das alternativas pesquisada
por estudiosos fora a utilização de jogos digitais para educação, sendo presente seus estudos
desde individuais que usaram seu estudo para o PhD como o (FROSI,2010) até estudo
das academias de Washington em parceria como o (HONEY; HILTON,2011), além de ter
presente em jornais académicos como em (ZIRAWAGA; OLUSANYA; MADUKU,2017),
nesse projeto vamos explorar mais essa alternativa com a criação de jogos educacionais,
servindo como base e exemplo de criação de jogos educacionais, para o desenvolvimento do
jogo fora preciso escolher uma linguagem de programação a qual fora escolhida a linguagem
de programação mais utilizada no IFC-CA o Python para este projeto juntamente com a
utilização da interface gráfica Pyside2.
No capitulo 2se encontra o desenvolvimento passo a passo de como criar um jogo
de memoria de elementos químicos e um jogo de álgebra linear, onde se encontra imagens
no lugar das variáveis, ambos os jogos tem seu digo fonte comentado linha a linha, junto
com os materiais utilizados de apoio durante o desenvolvimento dos jogos, mostrando
desde a criação da interface, parte a parte com imagens para apoio, e seu digo criado
em partes, explicando e mostrando sua criação, tendo no primeiro jogo criado, sua criação
parcial, sem funcionamento pleno, para observação de como está ficando o desenvolvimento,
e adicionando novos mecanismos, como por exemplo criando primeiro a aplicação com a
imagem fixa, e depois mudando para que possa mudar a imagem, no capitulo 3se encontra
a conclusão do projeto, dando suas considerações finais sobre o projeto junto com os
resultados e as dificuldades encontradas.
19
2 Desenvolvimento dos jogos
Nesse capitulo vamos criar passo a passo o jogo da memoria, e o jogo de álgebra,
começando com a instalação e configuração do Python, juntamente com a instalação
do PySide2, Qt Designer, PyInstaller e o editor de textos Geany, depois para melhor
entendimento de como utilizar o Qt Designer, vamos explicar separadamente por subsecções
de como fazer juntamente com uma ou mais imagens, sendo que algumas das imagens
vão apresentar uma seta preta para maior comodidade visual dos locais indicados, no
desenvolvimento além de criar a interface no Qt Designer vamos ter que criar os digos
em Python, para criar a aplicação, interfaces mais simples, podem ser criadas somente
com o Qt Designer, no caso dos jogos que vamos criar é necessário fazer algumas parte
em Python manualmente, tendo todos os digos comentados linha por linha, e com uma
breve descrição antes dos códigos.
2.1 Instalação de programas
Nessa secção vamos arrumar o computador para começar o desenvolvimento dos
jogos educacionais, fazendo a instalação e configuração dos componentes necessários, sendo
necessário seguir uma ordem para começar as instalações, começando pela instalação do
Python, que é disponível para varias plataformas diferentes, encontrado no site (ROSSUM,
1991), sua instalação é simples, no Windows tem que apenas selecionar para adicionar o
Python ao Path conforme a imagem 1, após instalar o Python, é recomendado instalar um
editor de texto que suporte Python, para facilitar sua execução, e verificação durante o
desenvolvimento, por preferência do desenvolvente do projeto, foi escolhido o Geany, que se
encontra no site (GEANY,2005), por não haver necessidade de gerenciamento de pastas ou
outras utilidades, sua instalação também é simples, sem precisar especificar nada, contanto
que tenha adicionado o Python no Path ao instalar o Python, o Geany vai se configurar
automaticamente para funcionar com o Python, tendo instalado o Python e o Geany,
tem que instalar o PySide 2 e QT Design, que são executados no terminal, no caso do linux
normalmente se utiliza Ctrl + Alt + T, e para ativar o modo administrativo se escreve
‘sudo su’ no terminal, e no windows é utilizado Windows+R, para abrir uma pesquisa e
depois escrito ‘cmd’ na pesquisa, ao apertar Enter se abre o terminal no modo usuário, caso
seja necessário se utiliza Ctrl+Shift+Enter, ao invés de apenas Enter, para abrir o terminal
no modo administrativo, outra maneira é apenas escrever ‘cmd’ na barra de pesquisar do
Windows, a instalação dos programas é simples, sendo uma vez aberto o terminal executar
os comandos de instalação, sendo eles os comandos 1,2,3e4, lembrando da importância
de seguir a sequencia definida, para que fique tudo configurado e funcionando, pois em
Capítulo 2. Desenvolvimento dos jogos 20
sua maioria é configurado baseado no qual fora instalado, mudar sua sequencia pode vir
a causar problemas futuros, começando pela atualização do pip, que é o comando 1usado
para instalar funções para o Python, próximo é o comando 2usado para instalação do
PySide2 o qual foi selecionado para o desenvolvimento do projeto, seu repositório pip pode
ser encontrado em (PYPI,b), seguindo com o comando 3usado para a instalação do Qt
Designer, que apesar do nome estar escrito PyQt5, sua utilização é a mesma para PySide2
como foi verificado anteriormente sua semelhança entre eles, e o QT Design verifica qual
a versão do aplicativo, se adequando para o PySide2 ou PyQt5 dependendo de qual
se encontra instalado, tendo seu repositório pip em (PYPI,a), com esses três comandos
instalamos os utilitários para começar a desenvolver os jogos, mas vamos aproveitar e
instalar o PyInstaller usando o comando 4sendo ele um conversor de digos em Python
para executáveis, que pode ser usado para Windows, GNU/Linux, Mac OS X, FreeBSD,
Solaris e AIX, sua criação de executáveis não tem dependência de ter Python instalado
na máquina que vai executa-los, possuindo dois tipos separados de criação de executável,
primeiro tipo é um pasta de arquivos com o executável, o segundo tipo é um executável
autónomo, sem nenhum outro arquivo junto, qual vai ser o foco do desenvolvimento, mais
informações sobre o Pyinstaller podem ser encontrados no site oficial em (Py Installer,
2005), uma vez instalado tudo é necessário arrumar alguns detalhes na pasta do Python,
sendo encontrado na sub-subsecção 2.1.1.
Figura 1 Instalador do Python no Windows 10
2.1.0.1 Comandos
1pip install upgrade pip
digo 1 Comando utilizado para atualizar o pip para a ultima versão disponível
Capítulo 2. Desenvolvimento dos jogos 21
1pip i n s t a l l PySide2
digo 2 Comando utilizado para instalar o PySide2 na ultima versão disponível
1pip i n s t a l l PyQt5Designer
digo 3 Comando utilizado para instalar o Qt Designer na ultima versão disponível
1pip i n s t a l l p y i n s t a l l e r
digo 4 Comando utilizado para instalar o PyInstaller na ultima versão disponível
1python c"import sys ; print(sys.executable)"
digo 5 Comando utilizado para verificar o local da pasta do Python
2.1.1 Arrumando o Python
Nessa sub-subsecção vamos arrumar os arquivos da pasta do Python, que foi
instalado utilizando o comando 5para achar o local da pasta do Python, após se ter
o local da pasta pode ser feito um atalho, sendo da pasta específica, ou apenas para o
executável do designer, que se encontra na pasta Scripts, dentro da pasta do Python.
porém não é necessário, ao abrir o terminal e escrever ‘designer’, ele vai abrir o QT Design,
a criação do link é apenas para agilizar o processo. Para a utilização do PySide2 no
windows é necessário copiar um arquivo chamado ‘shiboken2.abi3.dll’ dentro da pasta
\
Lib
\
site-packages
\
shiboken2’ para a pasta do PySide2, encontrado dentro do python na
pasta
\
Lib
\
site-packages
\
PySide2’, todos os pacotes instalados no python se encontram
no
\
Lib
\
site-packages
\
’, o shiboken2 é instalado quando se instala o PySide2, lembrando
que o arquivo ‘shiboken2.abi3.dll’ deve estar contido em ambas as pastas do shiboken2 e
PySide2 para funcionar, por isso deve se copiar apenas, tendo feito isso o Python vai estar
pronto para ser utilizado.
2.2 Desenvolvimento do jogo da memoria
Na secção anterior foi instalado e configurado os componentes necessários para a
criação dos jogos educacionais, nessa sessão vamos criar o jogo da memoria, do começo ao
fim, criando seu executável individual usando o PyInstaller, começando o desenvolvimento
do jogo de memória em Python utilizando PySide2 com QT Design, devemos lembrar
que no desenvolvimento devemos evitar nomes com acentuação ou espaçamentos, no caso
de espaçamento utilizar ‘_’ em seu lugar, pois pode acarretar erros, caso seja utilizado
acentuação ou espaçamentos, abrindo o Qt Designer, sendo pelo atalho criado na sub-
subsecção 2.1.1 ou pelo terminal digitando ‘designer’, ao abrir ele vai mostrar algumas
Capítulo 2. Desenvolvimento dos jogos 22
opções de tela, como vamos criar um novo, escolhemos o Main Windows, conforme pode
ser observado na figura 2.
Figura 2 Criando o Main Windows
2.2.1 Arrumando a MainWindows
Nessa subsecção vamos arrumar o MainWindows, ao criar o MainWindows, ele vem
com um tamanho padrão com barra e status, conforme pode ser observado na figura 3,
para mudar o tamanho, se pode mudar pela geometria no editor de propriedades, que
se encontra na parte com texto amarelo, ou redimensionar usando o mouse, acima do
editor de propriedades, encontramos o inspetor de objetos, que mostra os objetos que
possuem na aplicação atual, e com um sistema cascata para identificar, qual objeto está
dentro, sua hierarquia, que nesse caso podemos encontrar o menubar e statusbar, que não
seram utilizados, portanto apertando com o botão direito do mouse, podemos verificar as
possíveis ações a utilizar com o objeto específico, nesse caso vamos remover ambos, ficando
conforme a figura 4.
Capítulo 2. Desenvolvimento dos jogos 23
Figura 3 Main Windows
Figura 4 Removendo o menubar e statusbar
2.2.2 Criação da Label
Na subsecção anterior removemos o menubar e statusbar da MainWindows, nessa
subsecção vamos começar a fazer sua aparência, o qual terás oito imagens, que serviram
como cartas para o jogo de memória, para adicionar as imagens usaremos labels do Qt
Capítulo 2. Desenvolvimento dos jogos 24
Designer, que se encontra no lado esquerdo da tela, chamado Widget Box, puxando a barra
de rolagem para baixo podemos observar o setor de Display Widgets, onde se encontra a
Label, ou apenas apertando nas setas dos outros setores, para minimizar sua visualização,
ao encontrar a label, clicar com o mouse e arrastar para a tela e soltala, para colocar
na aplicação, depois redimensionar seu tamanho com o mouse, para isso utiliza-se os
pontilhados como base, e removemos seu texto, por seu objetivo ser utilizar a label para
adicionar imagens, tendo três maneiras de se mudar, clicar duas vezes na label, segunda
maneira é utilizar o botão direito do mouse na label, e apertar change plain text, que
permite editar seu texto e a terceira maneira é utilizar o editor de propriedades, que
possui uma barra de rolagem, como no Widget Box, que podemos minimizar os setores
de objeto, para chegar nas propriedades do QLabel, e alterar o campo text, para melhor
entendimento confira a figura 5.
Figura 5 Criando a Label
2.2.3 Imagens a serem utilizadas no jogo da memoria
Na subsecção anterior criamos uma label quadrada, sem texto, para poder adicionar
as imagens, nessa subsecção vamos pegar às imagens que utilizaremos no projeto, sendo
de autoria própria ou disponível na internet, nesse projeto, todas as imagens, foram
selecionadas da internet, considerando que muitas das imagens tem direitos autorais e
deve se pagar para o seu criador caso queira utilizar suas imagens com propósito comercial,
como o projeto não tem propósito comercial, foi possível baixar gratuitamente, e algumas
imagens são de livre comercialização, outras são parcialmente livre, que contém o nome
do site, onde se foi pego a imagem, e caso queira uma imagem limpa precisa pagar, das
Capítulo 2. Desenvolvimento dos jogos 25
imagens que precisaremos no projeto, considerando sua utilização no formato .png, para
evitar problemas, sendo uma imagem para servir de fundo da carta(sub-subsecção 2.2.3.1),
e quatro imagens para matéria(sub-subsecção 2.2.3.2), molécula(sub-subsecção 2.2.3.3)
e informativo(sub-subsecção 2.2.3.4), sendo todas sobre o mesmo elemento, sendo eles
H2O(monóxido de di-hidrogênio, água), NaCl(cloreto de dio, sal de cozinha), CO2(dióxido
de carbono, fumaça) e Fe2O3(óxido de ferro, ferrugem).
2.2.3.1 Imagem de Fundo da Carta
Figura 6
Imagem escolhida para servir de fundo das cartas, produzida por (GOD-
THESUPREME,2019)
2.2.3.2 Imagens de matéria
Figura 7
Imagem escolhida para servir de referencia de objeto contendo H2O, nesse caso
uma garrafa de água, produzida por (FREEPIK, )
Capítulo 2. Desenvolvimento dos jogos 26
Figura 8
Imagem escolhida para servir de referencia de objeto contendo CO2, nesse caso
a fumaça da cidade industrial, produzida por (NASA, )
Figura 9
Imagem escolhida para servir de referencia de objeto contendo FE2O3, nesse
caso um cano de ferro enferrujado, produzida por (VISENTINI,2012)
Figura 10
Imagem escolhida para servir de referencia de objeto contendo NACL, nesse
caso um recipiente de sal de cozinha, produzida por (JUHELE,2018)
Capítulo 2. Desenvolvimento dos jogos 27
2.2.3.3 Imagens de molécula
Figura 11
Imagem escolhida para representar o conjunto molecular H2O, produzida
por (Clip Art Max, )
Figura 12
Imagem escolhida para representar o conjunto molecular CO2, produzida
por (OXINOXI,2019)
Figura 13
Imagem escolhida para representar o conjunto molecular FE2O3, produzida
por (GRAFIKAZPAZUREM,2018)
Figura 14
Imagem escolhida para representar o conjunto molecular NACL, produzida
por (PETRROUDNY,2020)
Capítulo 2. Desenvolvimento dos jogos 28
2.2.3.4 Imagens de conhecimento
Figura 15
Imagem escolhida para servir de conhecimento sobre água, produzida por (Nova
Vida Filtros, )
Figura 16
Imagem escolhida para servir de conhecimento sobre dióxido de carbono ,
produzida por (ARVOREAGUA,2020)
Capítulo 2. Desenvolvimento dos jogos 29
Figura 17
Imagem escolhida para servir de conhecimento sobre ferrugem, produzida
por (Detetives do Cosmos,2021)
Figura 18
Imagem escolhida para servir de conhecimento sobre sal de cozinha, produzida
por (DIABETES,2020)
Capítulo 2. Desenvolvimento dos jogos 30
2.2.4 Criação do repositório de imagens
Na subsecção anterior selecionamos as imagens a serem utilizadas no jogo da
memoria, nessa subsecção vamos adicionar elas a um arquivo .qrc(Qt Resource System),
para sua utilização dentro do próprio QT Design, para adicionar temos que abrir o editor
de recursos, que se encontra no navegador de recursos, em baixo do editor de propriedades,
onde possui três abas, a pré-selecionada navegador de recursos, uma aba de editor de
ações, e uma de editor de sinais e receptores(Signal/Slot), que utilizaremos mais para frente,
por enquanto vamos adicionar às imagens para o programa, utilizando o lápis encontrado
na aba de navegador de recursos, conforme pode ser observado na figura 19, ao clicar no
lápis, vai abrir o editor de recursos, que pode ser movido ou redimensionado utilizando
o mouse, tendo os seis botões, conforme pode ser observado na figura 20, sendo eles da
esquerda para direita, criar um novo repositório .qrc (vai perguntar onde criar o arquivo),
abrir um repositório .qrc, e excluir um repositório .qrc carregado, e os outros três são de
edição do conteúdo do repositório, sendo criar um prefixo, como uma pasta onde ficaram os
arquivos, obrigatório sua criação, proximo botão é adicionar arquivos, imagens, texto, entre
outros, e o último botão é para remover um arquivo ou prefixo. No editor de recursos vamos
criar um repositório .qrc, podendo ser qualquer nome desejado, não tem interferência na
aplicação, nesse caso vamos chamar de unico(lembrando em evitar a acentuação), e criar
quatro prefixos, onde seu nome influencia na aplicação, vamos nomeálos respectivamente
imagens para colocar a imagem de fundo referente a sub-subsecção 2.2.3.1, e outras imagens
caso tenha vontade, informativo para colocar as imagens sobre informações referente a
sub-subsecção 2.2.3.4, materia para colocar as imagens das matérias referente a sub-
subsecção 2.2.3.2, como a garrafa de água e por fim molecula para colocar as imagens das
composições moleculares referente a sub-subsecção 2.2.3.3, após ter criado eles, somente
selecionar qual prefixo deseja adicionar a imagem, e apertar para adicionar arquivos, sendo
às imagens, referenciadas acima, seu local onde elas estão armazenadas, não influenciam
na aplicação, mas para organização, fora criado uma pasta, memorise, para armazenar
os arquivos do jogo de memória, como o repositório unico.qrc, e dentro dela uma pasta
chamada imagem, para deixar a imagem de fundo, e três pastas específicas dentro, sendo
elas conhecimento, matéria e molécula, onde coloquei cada imagem baixado em sua pasta
específica, lembrando o local das imagens não influenciam no aplicativo, porém uma vez
colocado no repositório .qrc, ele sempre vai procurar o arquivo no mesmo local, caso delete,
mude o nome, mova, faça alguma coisa com a imagem, vai precisar, entre no editor de
recursos, remover o arquivo editado e re-inserir o arquivo, após colocar todos os arquivos
dentro dos prefixo certos, tem que adicionar um apelido para às imagens, algo muito
importante, quando for colocar o apelido, utilizar o mesmo apelido para os elementos
certos, como a imagem do informativo de CO2, a imagem da fumaça, e a imagem da
molécula CO2, colocar todos esses três com o mesmo apelido, que nesse caso foi escolhido
fumaca, para o NaCl foi escolhido sal, para H2O foi água, para Fe2O3 foi ferrugem e para
Capítulo 2. Desenvolvimento dos jogos 31
o fundo, escolhemos fundo_carta(lembrando de utilizar ‘_’ no lugar de espaçamento), ao
criar todos, da maneira certa, pode se confirmar clicando em ok, completando a criação
do repositório .qrc chamado unico que será utilizado na criação do aplicativo, podendo
verificar e comparar com a figura 21, onde está preenchido da maneira correta.
Figura 19 Navegador de recursos encontrado no canto inferior direito do Qt Designer
Capítulo 2. Desenvolvimento dos jogos 32
Figura 20 Editor de Recursos
Capítulo 2. Desenvolvimento dos jogos 33
Figura 21 Editor de Recursos preenchido corretamente
2.2.5 Criando as labels de imagem e texto
Na subsecção anterior foi criado o repositório de imagens unico.qrc, nessa subsecção
vamos adicionar a imagem na label criada, para isso vamos nas propriedades da QLabel,
encontrada na esquerda no editor de propriedades, onde vai estar as propriedades do
QObject,QWidget,QFrame e por fim o QLabel, podendo minimizar eles, deixando apenas
o QLabel, dento das propriedades do QLabel se encontra a opção pixmap, que é utilizado
para adicionar uma imagem para a label, clicando nela ela vai pedir para selecionar uma
imagem do recursos, que foi criado na subsecção anterior, selecionando o prefixo imagens,
e a imagem de fundo_carta, e confirmar com o botão OK, foi escolhido fundo_carta,
pois serás a face mostrada, e apenas após clicar na carta, vai mostrar o outro lado da
carta podendo conter uma imagem de matéria ou molécula, ao confirmar a imagem vai ser
carregada na label, porém vai ficar fora de proporção, para isso seleciona-se a opção embaixo
de pixmap, scaledContents, para fazer a imagem ficar do tamanho da label conforme pode
ser observado na figura 22, ao criar a label com o tamanho desejado com a imagem,
vamos voltar nas propriedades e maximizar a propriedades do QWidget, para mudar o tipo
de cursor para pointing hand conforme pode ser observado na figura 23, depois de arrumar
Capítulo 2. Desenvolvimento dos jogos 34
a label com a imagem e com o cursor, vamos selecionar a label e copiar ela, sendo possível
de varias maneiras, utilizando o botão direito na label presente na tela ou no inspetor de
objetos, onde removemos o statusbar e menubar, outra maneira, mais prática e fácil, é
selecionar a label na tela e utilizar o atalho Ctrl + C para copiar e Ctrl + V para colar a
cópia, podendo clicar e arrastar o mouse para fazer seleções múltiplas, ao copiar e colar a
primeira label tem que alinhar a distância entre elas e sua posição, agora pode selecionar
ambas para copiar e colar conforme a figura 24, assim ficando com quatro cartas, alinhar
elas novamente, e depois copiar a linha inteira de quatro para colocar em baixo, conforme
a figura 25, ficando com as oito cartas do jogo, agora vamos criar uma label em cima das
cartas para escrever a explicação sobre o jogo, preferencialmente fazer a label do tamanho
da tela, e ajustar o tamanho da tela, o texto a ser escrito será ‘Jogo da memória: Combine
as cartas de estrutura molecular com os materiais correspondentes’, para escolher um
formato especial de texto, utilizamos o botão direito na label, e escolhemos, Change rich
text..., conforme a figura 26, que vai permitir editar o texto como no word, docs, entre
outros, porém com funções simples para texto, deixando a primeira linha escrito "Jogo
da memória: "sem as aspas, em negrito com tamanho 12 e centralizado, a segunda linha
também em negrito centralizado, porém com a letra um pouco menor, mudando para
tamanho 10, e escrevendo "Combine as cartas de estrutura molecular com os materiais
correspondentes "sem as aspas, ficando conforme a figura 27,com a interface básica pronta
conforme a figura 28, podemos observar como vai ficar a aplicação indo na aba Form no
canto esquerdo superior do QT Design, e selecionar Preview. . . , ou utilizando o atalho
Ctrl + R, conforme pode ser observado na figura 29.
Figura 22 Definindo a imagem de fundo na label criada
Capítulo 2. Desenvolvimento dos jogos 35
Figura 23 Definindo o cursor como ponteiro
Figura 24 Copiando duas labels
Capítulo 2. Desenvolvimento dos jogos 36
Figura 25 Copiando quatro labels
Capítulo 2. Desenvolvimento dos jogos 37
Figura 26 Criando a label e selecionando a mudança de texto com formatação
Figura 27 Definindo o texto formatado da label
Capítulo 2. Desenvolvimento dos jogos 38
Figura 28 Visualização após sua criação
Capítulo 2. Desenvolvimento dos jogos 39
Figura 29 Visualização da previa do aplicativo
2.2.6 Configurando as labels
Na subsecção anterior criamos oito labels com a imagem de fundo, juntamente com
uma label de texto em cima das cartas explicando sobre o jogo, nessa subsecção vamos
começar a criar a função de trocar a face das cartas, atualmente para aprendizado, vamos
criar a função de cada carta separada, como serão funções novas, vamos promover às labels
de imagens para outro tipo, criando uma widget personalizada, podendo encontrar em
varios sites de como fazer, por exemplo (HARIS,2015;BOY,2017;K.,2018;PYTHON,
a;T.,2018;CUNHA,2017), selecionando uma label ou todas as labels com a imagem
de fundo e apertando com o botão direito do mouse em uma das labels com imagem
e selecionando Promote to . . . , conforme pode ser observado na figura 30, ao abrir ele
vai aparecer uma janela, das widgets promovidas, nesse caso, em cima mostrando às
existentes, e embaixo qual vai ser criada, por padrão a classe básica vai ser o objeto que
foi selecionado, nesse caso a QLabel, então é necessário escolher o nome, escolhendo o
nome clicklabel, pois vai ser uma label clicável, para ao clicar nela, ela mude de face, o
header se auto nomeia baseado no nome escolhido, após escrito apertar para adicionar,
conforme pode ser observado na figura 31, assim que adicionado, ela vai para lista na
parte superior, ao estar criado vamos apertar com o botão direito do mouse para editar os
sinais e receptores(Change signals
\
slots), para poder adicionar às novas funções a label
especial clicklabel, conforme pode ser observado na figura 32, no editor de receptores e
sinais que se abre ao selecionar para editar os sinais e recptores, podendo ser visualizado na
figura 33, se seleciona o sinal de mais para criar uma nova função para os receptores(Slots)
Capítulo 2. Desenvolvimento dos jogos 40
ou sinais(Signals) e o sinal de menos para remover uma função criada, sendo os sinais
funções que mandam sinais, e os receptores funções que recebem sinais, nesse caso vamos
criar a função click() como sinal, sendo que toda função deve ser instanciada com o nome
e um parênteses vazio, ou com algum parâmetro que vai ser passado, como nós quais
existem, e também vamos criar às funções do receptor, que vão ser acionadas depois
de receber o sinal da função click(), sendo as funções do receptor agua(), ferrugem(),
fumaca(), sal(), CO2(), FE2O3(), H2O e NACL(), ao preencher corretamente deve ficar
conforme a figura 34, ao criar todas as funções dos sinais e receptores, precisa confirmar
apertando o OK, agora pode fechar a janela de promoted Widgets, e utilizar o mouse
para selecionar todas as labels de carta e apertar com o botão direito do mouse em umas
das labels selecionadas, para mudar todas ao mesmo tempo, selecionando promote to >
clicklabel, conforme pode ser observado na figura 35.
Figura 30 Selecionando as labels para criar sua classe especial
Capítulo 2. Desenvolvimento dos jogos 41
Figura 31 Criando sua classe especial chamada clicklabel
Capítulo 2. Desenvolvimento dos jogos 42
Figura 32 Selecionando a classe especial para alterar seus sinais e receptores
Capítulo 2. Desenvolvimento dos jogos 43
Figura 33 Interface de alteração de sinais e receptores
Capítulo 2. Desenvolvimento dos jogos 44
Figura 34 Interface de alteração de sinais e receptores preenchida corretamente
Capítulo 2. Desenvolvimento dos jogos 45
Figura 35 Promovendo as labels de imagem para a classe clicklabel
2.2.7 Arrumando os sinais e receptores
Na subsecção anterior foi criado a classe especial clicklabel e suas funções de sinal
e receptor, e após criado foi promovido todas às labels de carta para clicklabel, nessa
subsecção vamos adicionar às ações do aplicativo, mudando da aba de editor de widgets
para aba de editor de sinais e receptores, que se encontra na parte superior esquerda do
QT Design, embaixo da aba Window, ao lado do editor de Widgets, conforme pode ser
oberservado na figura 36, durante o desenvolvimento do jogo vai ser necessário mudar
entre as abas do editor de widgets e editor de sinais e receptores algumas vezes, tendo
selecionado o editor de sinais e receptores, se clica no objeto que vai emitir o sinal, criando
uma seta vermelha e leva até o objeto com o receptor que vai receber o sinal, nesse caso
vai ser da label da carta até ela mesma, com o comando de sinal click(), e receptor agua(),
conforme pode ser observado na figura 37, e fazendo isso para cada uma das labels de carta,
mantendo o mesmo sinal click, e colocando um receptor diferente, que vai conter outra face
de carta, ao completar de linkar todas as labels com elas mesmas, o aplicativo deve estar
parecido com a figura 38, tendo como sinal click() em todos, e conectado com a própria
Capítulo 2. Desenvolvimento dos jogos 46
label, com seus receptores diferentes para cada uma das labels, para mais informações
sobre o modo esse modo de edição pode ser observado na documentação do QT em (QT,
n).
Figura 36 Localização do editor de sinais e receptores
Capítulo 2. Desenvolvimento dos jogos 47
Figura 37
Linkando o sinal click da clicklabel com o receptor agua da propria clicklabel
Figura 38 Visualização dos labels após criar todos os links
Capítulo 2. Desenvolvimento dos jogos 48
2.2.8 Criando o primeiro digo aplicativo.py
Na subsecção anterior criamos os links entre o sinal click() e o receptor para mudar
de face para cada uma das labels de carta, que mais para frente vamos juntá-las na mesma
função de mudar_face, nessa subsecção vamos começar a criar o digo em Python para
fazer o aplicativo funcionar, para isso vamos salvar a aplicação criada no Qt Design, num
arquivo chamado interface.ui dentro da pasta memorise, e agora vamos na pasta memorise
criar um arquivo chamado aplicativo.py(Python Script), e utilizaremos o terminal para
executar alguns comandos, primeiramente após abrir o terminal tem que utilizar o comando
cd ‘, sem as aspas até o local da pasta memorise, sendo um exemplo para windows, caso
tenha sido criado a pasta memorise dentro de documentos, cd Documents(caso o sistema
seja em inglês) ou cd Documentos(caso o sistema seja em portugues) e cd memorise, para
entrar na pasta, ou cd Documents
\
memorise, fazer um comando por vez, ou escrever
o caminho utilizando a barra tem o mesmo resultado, uma vez dentro da pasta vamos
converter o unico.qrc para recursos.py, utilizando o comando 6e depois vamos converter a
interface.ui para interface.py, utilizando o comando 7, tendo convertido ambos os arquivos,
para python vamos abrir o aplicativo.py com o geany, para começar a criar o aplicativo.py.
2.2.8.1 Comandos de conversão
Nessa sub-subsecção se encontra os digos de conversão 6e7.
1pyside2r c c u n ic o . q rc o r e c u r s o s . py
digo 6
Comando utilizado para converter arquivos .qrc para .py, nesse caso converter
unico.qrc para recursos.py
1pyside2u ic i n t e r f a c e . ui > i n t e r f a c e . py
digo 7
Comando utilizado para converter arquivos .ui para .py, nesse caso converter
interface.ui para interface.py
2.2.8.2 digos gerados pelo QT Designer
Na sub-subsecção anterior se encontra os códigos de conversão 6e7, nessa sub-
subsecção temos os digos gerados pelo Qt Designer, antes de serem convertidos para
arquivos em Python.
1<RCC>
2<q r e s o u r c e p r e f i x=" imagens ">
3< f i l e a l i a s="fundo_carta">imagem/ fundo_carta . png</ f i l e>
4</ q r e s o u r c e>
5<q r e s o u r c e p r e f i x="informativo">
6< f i l e a l i a s="fumaca">imagem/ conhecimento /CO2_arvore . png</ f i l e>
7< f i l e a l i a s="ferrugem">imagem/ conhecimento / ferrugem_marte . png</ f i l e>
Capítulo 2. Desenvolvimento dos jogos 49
8< f i l e a l i a s="sal ">imagem/ conhecimento / q ua nt id ad e_s al . png</ f i l e>
9< f i l e a l i a s="agua">imagem/ conhecimento / agua_ajuda . png</ f i l e>
10 </ q r e s o u r c e>
11 <q r e s o u r c e p r e f i x="materia">
12 < f i l e a l i a s="ferrugem">imagem/ materia / fer rugem . png</ f i l e>
13 < f i l e a l i a s="fumaca">imagem/ mater i a /fumaca . png</ f i l e>
14 < f i l e a l i a s="sal ">imagem/ mate r ia / s a l . png</ f i l e>
15 < f i l e a l i a s="agua">imagem/ m ateria / agua . png</ f i l e>
16 </ q r e s o u r c e>
17 <q r e s o u r c e p r e f i x="molecula ">
18 < f i l e a l i a s="fumaca">imagem/ mol e cula /CO2. png</ f i l e>
19 < f i l e a l i a s="ferrugem">imagem/ molecu l a /FE2O3 . png</ f i l e>
20 < f i l e a l i a s="sal ">imagem/ molec u la /NACL. png</ f i l e>
21 < f i l e a l i a s="agua">imagem/ molecula /H2O. png</ f i l e>
22 </ q r e s o u r c e>
23 </RCC>
digo 8 Código unico.qrc criado no QT Designer
1<?xml v e r s i o n="1.0 " encoding="UTF -8" ?>
2<u i v e r s i o n="4.0">
3<c l a s s>MainWindow</ c l a s s>
4<widget c l a s s="QMainWindow" name="MainWindow">
5<p r operty name=" geometry">
6<r e c t>
7<x>0</x>
8<y>0</y>
9<width>561</ width>
10 <h e i g h t>546</ h e i g h t>
11 </ r e c t>
12 </property>
13 <p r operty name="windowTitle">
14 <s t r i n g>MainWindow</ s t r i n g>
15 </property>
16 <p r operty name="autoFillBackground">
17 <b o o l> f a l s e</ bool>
18 </property>
19 <widget c l a s s="QWidget" name="centralwidget">
20 . . .
21 </ widget>
22 <customwidgets>
23 <customwidget>
24 <c l a s s>c l i c k l a b e l</ c l a s s>
25 <extends>QLabel</ e x t e n d s>
26 <hea der>c l i c k l a b e l . h</ header>
27 <slots>
28 <s i g n a l>c l i c k ( )</ s i g n a l>
29 <s l o t>mudar_face ( )</ s l o t>
Capítulo 2. Desenvolvimento dos jogos 50
30 <s l o t>agua ( )</ s l o t>
31 <s l o t>ferru gem ( )</ s l o t>
32 <s l o t>fumaca ( )</ s l o t>
33 <s l o t>s a l ( )</ s l o t>
34 <s l o t>CO2( )</ s l o t>
35 <s l o t>FE2O3( )</ s l o t>
36 <s l o t>s l o t 2 ( )</ s l o t>
37 <s l o t>H2O( )</ s l o t>
38 <s l o t>NACL( )</ s l o t>
39 </ s l o t s>
40 </customwidget>
41 </customwidgets>
42 <resources>
43 <i n c l u d e l o c a t i o n="unico.qrc "/>
44 </resources>
45 <connections>
46 . . .
47 </connections>
48 </ ui>
digo 9
digo interface.ui abreviado por ser grande que fora criado no QT Designer
2.2.8.3 digos gerados após a utilização dos comandos de conversão
Na sub-subsecção anterior se encontra os códigos gerados pelo Qt Designer, antes
de serem convertidos para arquivos em Python, nessa sub-subsecção temos os arquivos em
Python após utilizar os comandos de conversão 6e7.
1# Reso urce o b j e c t code ( Python 3)
2# Creat ed by : o b j e c t co de
3# Created by : The Resource Compiler f o r Qt v e r si o n 5 . 1 5 . 2
4# WARNING! All changes made in t h i s f i l e w i l l be l o s t !
5
6from PySide2 import QtCore
7
8qt_resource_data = b"\có digo de quase 190 mil linhas "
9
10 de f qInitResources () :
11 QtCore . qRegisterResourceData (0 x03 , qt_resour c e _ s t r u c t , qt_resource_name
, qt_resource_data )
12
13 de f q CleanupR esou rces ( ) :
14 QtCore . q Un r e g i s t e r R e s o u r c e D a t a (0 x03 , qt_resource_s t r u c t ,
qt_resource_name , qt_resource_data )
15
16 qInitResources ()
Capítulo 2. Desenvolvimento dos jogos 51
digo 10
digo abreviado por ser muito grande que fora gerado ao converter as
imagens do unico.qrc em linguagem do Python, após execução do comando 6
1# coding : u t f 8
2
3#######################################################################
4## Form gen e r ated from r ead i ng UI f i l e i n t e r f a c e . u i
5##
6## Created by : Qt User I n t e r f a c e Compiler v e rs i o n 5 . 1 5 . 2
7##
8## WARNING! A l l ch ang es made i n t h i s f i l e w i l l be l o s t when r e c o m p i l i n g UI
file !
9#######################################################################
10
11 from PySide2 . QtCore import
12 from PySide2 . QtGui import
13 from PySide2 . QtWidgets import
14
15 from clicklabel import clicklabel
16
17 import unico_rc
18
19 class Ui_MainWindow( object) :
20 de f s etupUi ( s e l f , MainWindow ) :
21 i f not MainWindow . objectName ( ) :
22 MainWindow . setObjectName ( u"MainWindow")
23 MainWindow . r e s i z e ( 5 61 , 546)
24 MainWindow . setAutoFillBackground ( F als e )
25 s e l f . c e n t r a l w i d g e t = QWidget (MainWindow )
26 s e l f . c e n t r a l w i d g e t . setObjectName ( u" centralwidget " )
27 s e l f . l abe l_ 2 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
28 s e l f . l a b e l _ 2 . setObjectName (u" label_2 " )
29 s e l f . l a b e l _ 2 . setGeometry (QRect (10 , 90 , 121 , 211) )
30 s e l f . l a b e l _2 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
31 s e l f . l a b e l _ 2 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
32 s e l f . l a b el_2 . s e t S c a l e d C o n t e n t s ( True )
33 s e l f . l abe l_ 3 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
34 s e l f . l a b e l _ 3 . setObjectName (u" label_3 " )
35 s e l f . l a b e l _ 3 . setGeometry (QRect (150 , 90 , 121 , 211) )
36 s e l f . l a b e l _3 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
37 s e l f . l a b e l _ 3 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
38 s e l f . l a b el_3 . s e t S c a l e d C o n t e n t s ( True )
39 s e l f . l abe l_ 5 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
40 s e l f . l a b e l _ 5 . setObjectName (u" label_5 " )
41 s e l f . l a b e l _ 5 . setGeometry (QRect (430 , 90 , 121 , 211) )
42 s e l f . l a b e l _5 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
Capítulo 2. Desenvolvimento dos jogos 52
43 s e l f . l a b e l _ 5 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
44 s e l f . l a b el_5 . s e t S c a l e d C o n t e n t s ( True )
45 s e l f . l abe l_ 6 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
46 s e l f . l a b e l _ 6 . setObjectName (u" label_6 " )
47 s e l f . l a b e l _ 6 . setGeometry (QRect (10 , 320 , 121 , 211) )
48 s e l f . l a b e l _6 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
49 s e l f . l a b e l _ 6 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
50 s e l f . l a b el_6 . s e t S c a l e d C o n t e n t s ( True )
51 s e l f . l abe l_ 7 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
52 s e l f . l a b e l _ 7 . setObjectName (u" label_7 " )
53 s e l f . l a b e l _ 7 . setGeometry (QRect (150 , 320 , 121 , 211) )
54 s e l f . l a b e l _7 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
55 s e l f . l a b e l _ 7 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
56 s e l f . l a b el_7 . s e t S c a l e d C o n t e n t s ( True )
57 s e l f . l abe l_ 8 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
58 s e l f . l a b e l _ 8 . setObjectName (u" label_8 " )
59 s e l f . l a b e l _ 8 . setGeometry (QRect (290 , 320 , 121 , 211) )
60 s e l f . l a b e l _8 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
61 s e l f . l a b e l _ 8 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
62 s e l f . l a b el_8 . s e t S c a l e d C o n t e n t s ( True )
63 s e l f . l abe l_ 9 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
64 s e l f . l a b e l _ 9 . setObjectName (u" label_9 " )
65 s e l f . l a b e l _ 9 . setGeometry (QRect (430 , 320 , 121 , 211) )
66 s e l f . l a b e l _9 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
67 s e l f . l a b e l _ 9 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
68 s e l f . l a b el_9 . s e t S c a l e d C o n t e n t s ( True )
69 s e l f . l abe l_ 4 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
70 s e l f . l a b e l _ 4 . setObjectName (u" label_4 " )
71 s e l f . l a b e l _ 4 . setGeometry (QRect (290 , 90 , 121 , 211) )
72 s e l f . l a b e l _4 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
73 s e l f . l a b e l _ 4 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
74 s e l f . l a b el_4 . s e t S c a l e d C o n t e n t s ( True )
75 s e l f . l a b e l = QLabel ( s e l f . c e n t r a l w i d g e t )
76 s e l f . l a b e l . setObjectName ( u"label" )
77 s e l f . l a b e l . setGeometry ( QRect ( 10 , 10 , 541 , 6 1) )
78 s e l f . l a b e l . setTextFormat (Qt . AutoText )
79 s e l f . l a b e l . setWordWrap ( F a lse )
80 s e l f . l a b e l . s e t T e x t I n t e r a c t i o n F l a g s ( Qt . N oT ex tI nt er ac tio n )
81 MainWindow . s et Ce nt ralWidget ( s e l f . c e n t r a l w i d g e t )
82
83 s e l f . r e t r a n s l a t e U i (MainWindow )
84 s e l f . l a b e l _ 2 . c l i c k . connect ( s e l f . la b e l _ 2 . agua )
85 s e l f . l a b e l _ 3 . c l i c k . connect ( s e l f . la b e l _ 3 . ferrugem )
86 s e l f . la b e l _ 4 . c l i c k . connect ( s e l f . la b e l _ 4 . fumaca )
87 s e l f . l a b e l _ 5 . c l i c k . connect ( s e l f . la b e l _ 5 . s a l )
88 s e l f . l a b e l _ 6 . c l i c k . connect ( s e l f . la b e l _ 6 . CO2)
89 s e l f . l a b e l _ 7 . c l i c k . connect ( s e l f . la b e l _ 7 . FE2O3)
Capítulo 2. Desenvolvimento dos jogos 53
90 s e l f . l a b e l _ 8 . c l i c k . connect ( s e l f . la b e l _ 8 . H2O)
91 s e l f . l a b e l _ 9 . c l i c k . connect ( s e l f . la b e l _ 9 .NACL)
92
93 QMetaObject . connectSlotsByName ( MainWindow)
94 # setupUi
95
96 de f r e t r a n s l a t e U i ( s e l f , MainWindow ) :
97 MainWindow . setWindowTitle ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,
u"MainWindow" , None ) )
98 s e l f . l a b e l _ 2 . s e t T e x t ( "" )
99 s e l f . l a b e l _ 3 . s e t T e x t ( "" )
100 s e l f . l a b e l _ 5 . s e t T e x t ( "" )
101 s e l f . l a b e l _ 6 . s e t T e x t ( "" )
102 s e l f . l a b e l _ 7 . s e t T e x t ( "" )
103 s e l f . l a b e l _ 8 . s e t T e x t ( "" )
104 s e l f . l a b e l _ 9 . s e t T e x t ( "" )
105 s e l f . l a b e l _ 4 . s e t T e x t ( "" )
106 s e l f . l a b e l . s et Te x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<html
><head /><body ><p align =\" center\"><span style =\" font - size :12 pt; font -
weight :600;\" > Jogo da memoria : </ span > </p> <p align =\" center \"> <span style
=\" font -size :10 pt; font - weight :600;\" > Combine as cartas de estrutura
molecular com os materiais correspondentes </span ></p></body ></html >" ,
None ) )
107 # r e t r a n s l a t e U i
digo 11
digo gerado ao converter o interface.ui em linguagem do Python, após
execução do comando 7
2.2.8.4 Criando os importes e copiando a interface convertida para o aplicativo.py
Na sub-subsecção anterior se encontra os arquivos em Python após utilizar os
comandos de conversão 6e7, nessa sub-subsecção vamos começar a desenvolver o apli-
cativo.py, importando as bibliotecas e recursos generalizados que vai ser utilizado no
aplicativo com a utilização do asterisco, conforme pode ser observado no digo 12, depois
que o aplicativo estiver completo, teremos que mudar para apenas os específicos utili-
zados no projeto, nessa sub-subsecção também vamos adicionar o digo convertido 11
no aplicativo,Tendo importado os dulos que vão ser utilizados, vamos abrir o arquivo
interface.py para copiar o seu conteúdo, do class Ui_MainWindow(object): conforme pode
ser observado no digo 13, que é tudo após os importes da interface, no Geany tem um
botão de + e - antes de cada local de indentação, ao clicar pode minimizar ou expandir o
conteúdo, após ter copiado seu conteúdo o aplicativo.py deve ficar conforme o digo 14,
não se precisa mexer no Ui_MainWindow(object), podendo minimizar para ficar mais
visível, conforme pode ser observado na figura 39.
1# coding : u t f 8
Capítulo 2. Desenvolvimento dos jogos 54
2#Importando o s ist ema e o tempo abaixo , e a l i n ha de cima d e f i n e o t i p o de
c ó d i g o a s e r usado no python , o has htag (#) é u t i l i z a d o para d e f i n i r
coment á r i o s .
3import sys , time
4
5#Importando as imagens do qrc , que foram c o n v e r t i d a s para o a rqui vo
r e c u r s o s . py .
6import r e c u r s o s
7
8#Importando os o b j e t o s do PySide2 u t i l i z a d o s no programa , simboliza tudo
em python , no f u t u r o vamos mudar p ara o s e s p ec í f i c o s n e c e s s á r i o s , p ara
f i c a r mais l e v e .
9from PySide2 . QtGui import
10 from PySide2 . QtWidgets import
11 from PySide2 . QtCore import
digo 12 Criando os importes generalizado para o aplicativo
1# coding : u t f 8
2
3#######################################################################
4## Form gen e r ated from r ead i ng UI f i l e i n t e r f a c e . u i
5##
6## Created by : Qt User I n t e r f a c e Compiler v e rs i o n 5 . 1 5 . 2
7##
8## WARNING! A l l ch ang es made i n t h i s f i l e w i l l be l o s t when r e c o m p i l i n g UI
file !
9#######################################################################
10
11 from PySide2 . QtCore import
12 from PySide2 . QtGui import
13 from PySide2 . QtWidgets import
14
15 from clicklabel import clicklabel
16
17 import unico_rc
18
19 #S e l e c i o n a r daqui a t é . . .
20
21 class Ui_MainWindow( object) :
22 de f s etupUi ( s e l f , MainWindow ) :
23 i f not MainWindow . objectName ( ) :
24 MainWindow . setObjectName ( u"MainWindow")
25 MainWindow . r e s i z e ( 5 61 , 546)
26 MainWindow . setAutoFillBackground ( F als e )
27 s e l f . c e n t r a l w i d g e t = QWidget (MainWindow )
28 s e l f . c e n t r a l w i d g e t . setObjectName ( u" centralwidget " )
29 s e l f . l abe l_ 2 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
Capítulo 2. Desenvolvimento dos jogos 55
30 s e l f . l a b e l _ 2 . setObjectName (u" label_2 " )
31 s e l f . l a b e l _ 2 . setGeometry (QRect (10 , 90 , 121 , 211) )
32 s e l f . l a b e l _2 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
33 s e l f . l a b e l _ 2 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
34 s e l f . l a b el_2 . s e t S c a l e d C o n t e n t s ( True )
35 s e l f . l abe l_ 3 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
36 s e l f . l a b e l _ 3 . setObjectName (u" label_3 " )
37 s e l f . l a b e l _ 3 . setGeometry (QRect (150 , 90 , 121 , 211) )
38 s e l f . l a b e l _3 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
39 s e l f . l a b e l _ 3 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
40 s e l f . l a b el_3 . s e t S c a l e d C o n t e n t s ( True )
41 s e l f . l abe l_ 5 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
42 s e l f . l a b e l _ 5 . setObjectName (u" label_5 " )
43 s e l f . l a b e l _ 5 . setGeometry (QRect (430 , 90 , 121 , 211) )
44 s e l f . l a b e l _5 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
45 s e l f . l a b e l _ 5 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
46 s e l f . l a b el_5 . s e t S c a l e d C o n t e n t s ( True )
47 s e l f . l abe l_ 6 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
48 s e l f . l a b e l _ 6 . setObjectName (u" label_6 " )
49 s e l f . l a b e l _ 6 . setGeometry (QRect (10 , 320 , 121 , 211) )
50 s e l f . l a b e l _6 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
51 s e l f . l a b e l _ 6 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
52 s e l f . l a b el_6 . s e t S c a l e d C o n t e n t s ( True )
53 s e l f . l abe l_ 7 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
54 s e l f . l a b e l _ 7 . setObjectName (u" label_7 " )
55 s e l f . l a b e l _ 7 . setGeometry (QRect (150 , 320 , 121 , 211) )
56 s e l f . l a b e l _7 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
57 s e l f . l a b e l _ 7 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
58 s e l f . l a b el_7 . s e t S c a l e d C o n t e n t s ( True )
59 s e l f . l abe l_ 8 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
60 s e l f . l a b e l _ 8 . setObjectName (u" label_8 " )
61 s e l f . l a b e l _ 8 . setGeometry (QRect (290 , 320 , 121 , 211) )
62 s e l f . l a b e l _8 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
63 s e l f . l a b e l _ 8 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
64 s e l f . l a b el_8 . s e t S c a l e d C o n t e n t s ( True )
65 s e l f . l abe l_ 9 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
66 s e l f . l a b e l _ 9 . setObjectName (u" label_9 " )
67 s e l f . l a b e l _ 9 . setGeometry (QRect (430 , 320 , 121 , 211) )
68 s e l f . l a b e l _9 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
69 s e l f . l a b e l _ 9 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
70 s e l f . l a b el_9 . s e t S c a l e d C o n t e n t s ( True )
71 s e l f . l abe l_ 4 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
72 s e l f . l a b e l _ 4 . setObjectName (u" label_4 " )
73 s e l f . l a b e l _ 4 . setGeometry (QRect (290 , 90 , 121 , 211) )
74 s e l f . l a b e l _4 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
75 s e l f . l a b e l _ 4 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
76 s e l f . l a b el_4 . s e t S c a l e d C o n t e n t s ( True )
Capítulo 2. Desenvolvimento dos jogos 56
77 s e l f . l a b e l = QLabel ( s e l f . c e n t r a l w i d g e t )
78 s e l f . l a b e l . setObjectName ( u"label" )
79 s e l f . l a b e l . setGeometry ( QRect ( 10 , 10 , 541 , 6 1) )
80 s e l f . l a b e l . setTextFormat (Qt . AutoText )
81 s e l f . l a b e l . setWordWrap ( F a lse )
82 s e l f . l a b e l . s e t T e x t I n t e r a c t i o n F l a g s ( Qt . N oT ex tI nt er ac tio n )
83 MainWindow . s et Ce nt ralWidget ( s e l f . c e n t r a l w i d g e t )
84
85 s e l f . r e t r a n s l a t e U i (MainWindow )
86 s e l f . l a b e l _ 2 . c l i c k . connect ( s e l f . la b e l _ 2 . agua )
87 s e l f . l a b e l _ 3 . c l i c k . connect ( s e l f . la b e l _ 3 . ferrugem )
88 s e l f . la b e l _ 4 . c l i c k . connect ( s e l f . la b e l _ 4 . fumaca )
89 s e l f . l a b e l _ 5 . c l i c k . connect ( s e l f . la b e l _ 5 . s a l )
90 s e l f . l a b e l _ 6 . c l i c k . connect ( s e l f . la b e l _ 6 . CO2)
91 s e l f . l a b e l _ 7 . c l i c k . connect ( s e l f . la b e l _ 7 . FE2O3)
92 s e l f . l a b e l _ 8 . c l i c k . connect ( s e l f . la b e l _ 8 . H2O)
93 s e l f . l a b e l _ 9 . c l i c k . connect ( s e l f . la b e l _ 9 .NACL)
94
95 QMetaObject . connectSlotsByName ( MainWindow)
96 # setupUi
97
98 de f r e t r a n s l a t e U i ( s e l f , MainWindow ) :
99 MainWindow . setWindowTitle ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,
u"MainWindow" , None ) )
100 s e l f . l a b e l _ 2 . s e t T e x t ( "" )
101 s e l f . l a b e l _ 3 . s e t T e x t ( "" )
102 s e l f . l a b e l _ 5 . s e t T e x t ( "" )
103 s e l f . l a b e l _ 6 . s e t T e x t ( "" )
104 s e l f . l a b e l _ 7 . s e t T e x t ( "" )
105 s e l f . l a b e l _ 8 . s e t T e x t ( "" )
106 s e l f . l a b e l _ 9 . s e t T e x t ( "" )
107 s e l f . l a b e l _ 4 . s e t T e x t ( "" )
108 s e l f . l a b e l . s et Te x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<html
><head /><body ><p align =\" center\"><span style =\" font - size :12 pt; font -
weight :600;\" > Jogo da memoria : </ span > </p> <p align =\" center \"> <span style
=\" font -size :10 pt; font - weight :600;\" > Combine as cartas de estrutura
molecular com os materiais correspondentes </span ></p></body ></html >" ,
None ) )
109 # r e t r a n s l a t e U i
110
111 # . . . a qui para f a z e r a c ó pia e p as s ar a a p l i c a t i v o . py
digo 13 Abrindo o código da interface para copiar sua classe
1# coding : u t f 8
2#Importando o s ist ema e o tempo abaixo , e a l i n ha de cima d e f i n e o t i p o de
c ó d i g o a s e r usado no python , o has htag (#) é u t i l i z a d o para d e f i n i r
coment á r i o s .
Capítulo 2. Desenvolvimento dos jogos 57
3import sys , time
4#Importando as imagens do qrc , que foram c o n v e r t i d a s para o a rqui vo
r e c u r s o s . py .
5import r e c u r s o s
6
7#Importando os o b j e t o s do PySide2 u t i l i z a d o s no programa , simboliza tudo
em python , no f u t u r o vamos mudar p ara o s e s p ec í f i c o s n e c e s s á r i o s , p ara
f i c a r mais l e v e .
8from PySide2 . QtGui import
9from PySide2 . QtWidgets import
10 from PySide2 . QtCore import
11
12
13 class Ui_MainWindow( object) :
14 de f s etupUi ( s e l f , MainWindow ) :
15 i f not MainWindow . objectName ( ) :
16 MainWindow . setObjectName ( u"MainWindow")
17 MainWindow . r e s i z e ( 5 61 , 546)
18 MainWindow . setAutoFillBackground ( F als e )
19 s e l f . c e n t r a l w i d g e t = QWidget (MainWindow )
20 s e l f . c e n t r a l w i d g e t . setObjectName ( u" centralwidget " )
21 s e l f . l abe l_ 2 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
22 s e l f . l a b e l _ 2 . setObjectName (u" label_2 " )
23 s e l f . l a b e l _ 2 . setGeometry (QRect (10 , 90 , 121 , 211) )
24 s e l f . l a b e l _2 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
25 s e l f . l a b e l _ 2 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
26 s e l f . l a b el_2 . s e t S c a l e d C o n t e n t s ( True )
27 s e l f . l abe l_ 3 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
28 s e l f . l a b e l _ 3 . setObjectName (u" label_3 " )
29 s e l f . l a b e l _ 3 . setGeometry (QRect (150 , 90 , 121 , 211) )
30 s e l f . l a b e l _3 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
31 s e l f . l a b e l _ 3 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
32 s e l f . l a b el_3 . s e t S c a l e d C o n t e n t s ( True )
33 s e l f . l abe l_ 5 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
34 s e l f . l a b e l _ 5 . setObjectName (u" label_5 " )
35 s e l f . l a b e l _ 5 . setGeometry (QRect (430 , 90 , 121 , 211) )
36 s e l f . l a b e l _5 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
37 s e l f . l a b e l _ 5 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
38 s e l f . l a b el_5 . s e t S c a l e d C o n t e n t s ( True )
39 s e l f . l abe l_ 6 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
40 s e l f . l a b e l _ 6 . setObjectName (u" label_6 " )
41 s e l f . l a b e l _ 6 . setGeometry (QRect (10 , 320 , 121 , 211) )
42 s e l f . l a b e l _6 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
43 s e l f . l a b e l _ 6 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
44 s e l f . l a b el_6 . s e t S c a l e d C o n t e n t s ( True )
45 s e l f . l abe l_ 7 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
46 s e l f . l a b e l _ 7 . setObjectName (u" label_7 " )
Capítulo 2. Desenvolvimento dos jogos 58
47 s e l f . l a b e l _ 7 . setGeometry (QRect (150 , 320 , 121 , 211) )
48 s e l f . l a b e l _7 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
49 s e l f . l a b e l _ 7 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
50 s e l f . l a b el_7 . s e t S c a l e d C o n t e n t s ( True )
51 s e l f . l abe l_ 8 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
52 s e l f . l a b e l _ 8 . setObjectName (u" label_8 " )
53 s e l f . l a b e l _ 8 . setGeometry (QRect (290 , 320 , 121 , 211) )
54 s e l f . l a b e l _8 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
55 s e l f . l a b e l _ 8 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
56 s e l f . l a b el_8 . s e t S c a l e d C o n t e n t s ( True )
57 s e l f . l abe l_ 9 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
58 s e l f . l a b e l _ 9 . setObjectName (u" label_9 " )
59 s e l f . l a b e l _ 9 . setGeometry (QRect (430 , 320 , 121 , 211) )
60 s e l f . l a b e l _9 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
61 s e l f . l a b e l _ 9 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
62 s e l f . l a b el_9 . s e t S c a l e d C o n t e n t s ( True )
63 s e l f . l abe l_ 4 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
64 s e l f . l a b e l _ 4 . setObjectName (u" label_4 " )
65 s e l f . l a b e l _ 4 . setGeometry (QRect (290 , 90 , 121 , 211) )
66 s e l f . l a b e l _4 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
67 s e l f . l a b e l _ 4 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
68 s e l f . l a b el_4 . s e t S c a l e d C o n t e n t s ( True )
69 s e l f . l a b e l = QLabel ( s e l f . c e n t r a l w i d g e t )
70 s e l f . l a b e l . setObjectName ( u"label" )
71 s e l f . l a b e l . setGeometry ( QRect ( 10 , 10 , 541 , 6 1) )
72 s e l f . l a b e l . setTextFormat (Qt . AutoText )
73 s e l f . l a b e l . setWordWrap ( F a lse )
74 s e l f . l a b e l . s e t T e x t I n t e r a c t i o n F l a g s ( Qt . N oT ex tI nt er ac tio n )
75 MainWindow . s et Ce nt ralWidget ( s e l f . c e n t r a l w i d g e t )
76
77 s e l f . r e t r a n s l a t e U i (MainWindow )
78 s e l f . l a b e l _ 2 . c l i c k . connect ( s e l f . la b e l _ 2 . agua )
79 s e l f . l a b e l _ 3 . c l i c k . connect ( s e l f . la b e l _ 3 . ferrugem )
80 s e l f . la b e l _ 4 . c l i c k . connect ( s e l f . la b e l _ 4 . fumaca )
81 s e l f . l a b e l _ 5 . c l i c k . connect ( s e l f . la b e l _ 5 . s a l )
82 s e l f . l a b e l _ 6 . c l i c k . connect ( s e l f . la b e l _ 6 . CO2)
83 s e l f . l a b e l _ 7 . c l i c k . connect ( s e l f . la b e l _ 7 . FE2O3)
84 s e l f . l a b e l _ 8 . c l i c k . connect ( s e l f . la b e l _ 8 . H2O)
85 s e l f . l a b e l _ 9 . c l i c k . connect ( s e l f . la b e l _ 9 .NACL)
86
87 QMetaObject . connectSlotsByName ( MainWindow)
88 # setupUi
89
90 de f r e t r a n s l a t e U i ( s e l f , MainWindow ) :
91 MainWindow . setWindowTitle ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,
u"MainWindow" , None ) )
92 s e l f . l a b e l _ 2 . s e t T e x t ( "" )
Capítulo 2. Desenvolvimento dos jogos 59
93 s e l f . l a b e l _ 3 . s e t T e x t ( "" )
94 s e l f . l a b e l _ 5 . s e t T e x t ( "" )
95 s e l f . l a b e l _ 6 . s e t T e x t ( "" )
96 s e l f . l a b e l _ 7 . s e t T e x t ( "" )
97 s e l f . l a b e l _ 8 . s e t T e x t ( "" )
98 s e l f . l a b e l _ 9 . s e t T e x t ( "" )
99 s e l f . l a b e l _ 4 . s e t T e x t ( "" )
100 s e l f . l a b e l . s et Te x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<html
><head /><body ><p align =\" center\"><span style =\" font - size :12 pt; font -
weight :600;\" > Jogo da memoria : </ span > </p> <p align =\" center \"> <span style
=\" font -size :10 pt; font - weight :600;\" > Combine as cartas de estrutura
molecular com os materiais correspondentes </span ></p></body ></html >" ,
None ) )
101 # r e t r a n s l a t e U i
digo 14 O digo aplicativo.py após fazer copiar a classe da interface
Figura 39 Minimizando a classe Ui_MainWindows no editor de textos Geany
2.2.8.5 Criando a clicklabel juntamente com a configuração do aplicativo
Na sub-subsecção anterior criamos os importes a serem utilizados no projeto e
copiamos a classe Ui_MainWindow(object) para o aplicativo.py, nessa sub-subsecção
vamos criar a classe da clicklabel onde se encontra as imagens de cartas, conforme o
digo 15,começando ao criar a função __init__ e definindo seu parente como o QWidget,
e iniciando o super dentro do __init__, para podermos usar os componentes de seu parente,
que vai ser necessário mais para frente, para entender melhor como funciona o __init__
Capítulo 2. Desenvolvimento dos jogos 60
e a utilização de parente
\
filho dentro das funções podemos observar vários materiais de
apoio para diversas situações conforme pode ser observado em (U/TLAZOLTEOTL,2014;
SIGNALPROCESSED,2018;NIKHILAGGARWAL3,2019;SPANNBAUER,2019), após
criar o __init__ vamos criar a função click() que serve de sinal, para caso seja clicado
com o mousse e as funções dos receptores, tendo que instanciar @slot antes das funções,
conforme pode ser observado na documentação do QT em (QT,p), sendo as funções do
receptor agua(), ferrugem(), sal(), ..., atualmente para sua visualização funcional vamos
criar as funções dos receptores com apenas uma mensagem no terminal do Python de
qual função foi acionada, para garantir que está funcionando, depois de sua verificação,
mudaremos para trocar sua imagem de plano de fundo por outra imagem, para a utilização
como base para clicklabel usaremos o exemplo encontrado em (CUNHA,2017), após
criado a classe do clicklabel, vamos criar o mainWindows e o inicializador do aplicativo,
tendo materiais de apoio escritos ou em videos como em (VERSAFLOW,2020), onde
na classe MainWindow, vamos adicionar o Ui_MainWindow, instanciando que a classe
vai ser QMainWindow e vai utilizar o Ui_MainWindow, por ultimo vamos verificar se o
aplicativo foi executado com a utilização do if, onde vamos carregar o aplicativo e mostrar
na tela, ao terminar de criar todo o código podemos apertar F5 no Geany para observar
o digo sendo executado, com a interface feita, e quando clicado nas cartas, os nomes
sendo mostrados no terminal, conforme a figura 40.
1#Criando a c l i c k l a b e l que s e baseado na QLabel , que f o i c r i a d o no QT Design
2class c l i c k l a b e l ( QLabel ) :
3#Criando a fun ç ão de i n i c i a l i z a ção , que se executa cada vez que o
programa c r i a uma nova l a b e l u t i l i z a n d o o c l i c k l a b e l , e setando quem é
seu pa ren te , n e s s e c aso QWidget
4de f __init__ ( s e l f , parent=QWidget ) :
5#Gar an tindo que v a i f u nc io nar , e v a i a c i o n a r todas as v e z e s com o s u per
( )
6super ( ) . __init__ ( p aren t )
7
8#Criand o o s i n a l que f o i c r i a d o no e d i t o r de s i n a i s no QT Desi gn er , é
i mp orta n te t e r o mesmo nome , n e s s e c a so c l i c k .
9c l i c k = S i g n a l ( )
10
11 #Mudando a f un ç ã o padr ã o do c l i c k do mouse , par a f a z e r a l g o e x t r a .
12 de f mousePressEvent ( s e l f , e v ent ) :
13 #Adicionando que apó s c l i c a r com o mouse e l e emita o s i n a l c l i c k .
14 s e l f . c l i c k . emit ( )
15
16 #Cr ia ç ão dos s l o t s , os r e c e p t o r e s do s i n a l c l i c k , para i s s o sempre a fun ç
ão tem que t e r o nome do s l ot , d e f i n i d o no QT De signer , e s e r d e f i n i d o
@ sl o t ( ) a nt es da f un ç ã o
17 @Slot ( )
18 de f agua ( s e l f ) :
Capítulo 2. Desenvolvimento dos jogos 61
19 #Na fun ç ã o da agua vamos f a z e r que sempre que o r e c e p t o r r e c e b e r um
s i n a l , mo st rar no t e r m i n a l agua .
20 p r i n t ("agua " )
21 #Repe t i ç ã o da mesma f un ç ã o de agua , mudando a pena s o nome .
22 @Slot ( )
23 de f f erruge m ( s e l f ) :
24 p r i n t ("ferrugem " )
25 @Slot ( )
26 de f fumaca ( s e l f ) :
27 p r i n t ("fumaca" )
28 @Slot ( )
29 de f s a l ( s e l f ) :
30 p r i n t ("sal" )
31 @Slot ( )
32 de f CO2( s e l f ) :
33 p r i n t ("CO2" )
34 @Slot ( )
35 de f FE2O3( s e l f ) :
36 p r i n t ("FE2O3 " )
37 @Slot ( )
38 de f H2O( s e l f ) :
39 p r i n t ("H2O" )
40 @Slot ( )
41 de f NACL( s e l f ) :
42 p r i n t ("NACL " )
43
44 #Tendo c r i ad o tudo , vamos c r i a r a j a n e l a p r i n c i p a l , u t i l i z a n d o a i n t e r f a c e
c r i a d a no QT D esigne r
45 class MainWindow(QMainWindow , Ui_MainWindow) :
46 #Funç ão de i n i c i a l i z a ç ão
47 de f __init__ ( s e l f ) :
48 #G ar antindo su a exe cu ç ã o
49 super(MainWindow , s e l f ) . __init__ ( )
50 #Adicionando a i n t e r f a c e
51 s e l f . setup Ui ( s e l f )
52 #Mostrando a i n t e r f a c e
53 s e l f . show ( )
54
55 #Começ o da a p l i c a ç ão , d e f i n i n d o seu i n í c i o p r i n c i p a l
56 i f __name__ == __main__ :
57 #Defi n e a c r i a ç ão do a p l i c a t i v o
58 app = QApplicat ion ( sys . argv )
59 #Adicionando a j a n e l a p r i n c i p a l para o a p l i c a t i v o
60 mainWin = MainWindow ( )
61 #Executando o a p l i c a t i v o
62 r e t = app . exec_ ( )
63 #Terminando o programa
Capítulo 2. Desenvolvimento dos jogos 62
64 sy s . e x i t ( )
digo 15 Criação da clicklabel, MainWindows e seu inicializa-dor
Figura 40 Visuzalição da execução do programa no geany e seu funcionamento
2.2.8.6 Alterando a função do receptor para trocar a imagem da carta
Na sub-subsecção anterior criamos finalizamos o aplicativo básico, com a função de
click funcionando para mostrar uma mensagem no terminal, e observamos seu funciona-
mento, nessa sub-subsecção vamos começar a fazer as cartas mudarem de face ao serem
clicadas, começando pela função agua encontrado no digo 16, após criar para a função
de agua é necessário copiar para as outras funções, mudando os nome do caminho do
QPixmap de /materia/agua para o próximo, como /molecula/agua ou /materia/ferrugem,
baseado em qual é o nome da função e então todas as labels estaram trocando de face,
para criação da função vamos trabalhar com o QPixmap, Qlabel e QCursor utilizando suas
funções internas, podendo verificar elas nas documentações encontradas no QT em (QT,j;
QT,f;QT,e), tendo arrumado a função agua conforme o digo 16, podemos verificar a
aplicação funcionando apertando F5 no Geany, conforme a figura 41.
1@Slot ( )
2de f agua ( s e l f ) :
3
4#Vamos mudar a imagem , para quando c l i c a r mudar , en tr e f a ce da f r e n t e e a
f a c e de t r á s , para i s s o vamos usar o QPixmap , como no QT Desig ne r ,
usando o caminho d e f i n i d o no unico . qrc , come ç ando com : / para d e f i n i r
Capítulo 2. Desenvolvimento dos jogos 63
seu i n í c io , d ep ois s ó u t i l i z a m o s o p r e f i x o / ap eli do , n es s e c aso m at eri a
/agua
5pixmap = QPixmap( u":/ materia /agua" )
6#V e r i f i c a ç ão s e a imagem a tu al é i g u a l a imagem carregad a , o s e l f ,
r e p r e s e n t a a pr ó p r i a i n s t â n ci a , que s e t r abalha , pixmap ( ) , é
c ar re gam en t o do pixmap , e d e p o i s usamos a fun ç ã o t oI ma ge ( ) pa ra
tr a nsf o rma r em imagem , para poder comparar com a pixmap que c r iamos
acima , d entro de c l a s s e s , se u t i l i z a . para chamar a t r i b u t o s da c l a s s e ,
se nd o p ar â metros , f un ç õ e s , . . .
7i f ( s e l f . pixmap ( ) . toImage ( ) == pixmap . toImage ( ) ) :
8#Se f o r i g u a l ambas , v a i mudar o pixmap , p ara a c a r t a do fundo , no
caminho d e f i n i d o no . qrc
9pixmap = QPixmap( u" :/ imagens / fu ndo_carta " )
10 #Aqui chamamos a p r ó p r i a l a b e l com o s e l f e d e f i n i m o s uma nova imagem
usando o pixmap c r i a d o a n te r iormente , que caso s e j a i g u a l a imagem de á
gua , e e ntr e no i f , v ai s e r o fundo , e c a s o s e j a d i f e r e n t e e não entre ,
va i mostrar a imagem da á gua .
11 s e l f . setPixmap ( pixmap )
12
13 #Mudando o c ursor , para normal , ou com p o nte iro , c r ia mos um c u r s o r com
ponteiro
14 c u r s o r = QCursor ( Qt . Po inting HandCurs or )
15 #V e r i f i c a ç ã o s e o c u r s o r c r i a d o é i g u a l ao a t u a l
16 i f ( s e l f . c u r s o r ( ) == c u r s o r ) :
17 #Se f o r i g u a l , v a i mudar o c u r s o r para o normal , faze nd o e l e r e c e b e r um
novo QCursor .
18 c u r s o r = QCursor ( Qt . ArrowCursor )
19 #Aqui chamamos a p r ó p r i a l a b e l com o s e l f e d e f i n i m o s o novo c u r s o r
c ria do , como para o pixmap , s e o c u r s o r f o r i g u a l a p o nt eir o , v ai mudar
pa ra normal , e c a so nã o s e j a não v ai mudar e v a i s e r p o n t e i r o .
20 s e l f . s e tC ur so r ( c u r s o r )
digo 16 Alteração da função do receptor agua para trocar sua imagem
Capítulo 2. Desenvolvimento dos jogos 64
Figura 41 Visualização do programa após mudança de fundo para agua
2.2.8.7 Alterando a função do receptor para fazer as comparações
Na sub-subsecção anterior fora alterado a função agua para mudar a face da carta, e
verificado seu funcionamento, nessa sub-subsecção vamos começar a fazer as comparações,
vendo se as cartas de matéria e molécula condizem uma com a outra, para isso é necessário
ter um local para armazenar os valores da primeira carta clicada, e ser de possível acessar
para todas as labels de cartas, para isso temos que criar uma variável no seu parente
QWidget, para isso é necessário vamos voltar ao QT Design e promover o centralwidget
para novo_widget onde se encontra as clicklabels para podermos adicionar essas novas
variáveis de verificação. Como no caso da criação do clicklabel na subsecção 2.2.6, vamos
criar um novo chamado novo_widget e promover o centralwidget para ele, para facilitar
vamos usar o inspetor de objetos e apertar botão direito do mouse, promote to . . . , conforme
pode ser observado na figura 42, e criar o novo_widget, e apertar na própria tela promote,
conforme pode ser observado na figura 43, sendo que nesse caso não é necessário criar sinais
ou receptores, apenas promover pois as variáveis seram criadas no Python apenas, tendo
feito essa alteração temos que salvar o arquivo interface.ui, e novamente ir no terminal,
Capítulo 2. Desenvolvimento dos jogos 65
até o local da pasta e executa o comando de conversão 7, tendo feito a conversão temos
que abrir o arquivo interface.py e novamente copiar o class Ui_MainWindow(object): e
seu conteúdo para o aplicativo.py, como fora feito anteriormente na sub-subsecção 2.2.8.4,
sendo copiar tudo após os import, e substitui o class Ui_MainWindow(object): que está
no aplicativo.py, onde estamos desenvolvendo a aplicação, depois de copiado, vamos criar
uma nova classe chamada novo_widget, antes da classe clicklabel, e depois da classe
Ui_MainWindow, sendo encontrado no código 17, onde vamos criar as variáveis para
armazenar se foi encontrado um conjunto de materia e molecula correto, e qual foi a
primeira carta virada, para poder comparar ao virar a segunda carta, tendo criado o
novo_widget com suas novas variáveis de armazenamento, vamos mudar a função da
agua novamente conforme o código 18, começando por definindo o tipo e nome, que
vamos utilizar no caminho para imagem e nas suas comparações, utilizando as variáveis
de seu parente novo_widget, tendo definido qual é seu parente ao criar o clicklabel na
sub-subsecção 2.2.8.5, mudando de inverter a imagem entre fundo e água, para apenas
mudar para a face para água, e mudando seu cursor de mão para o cursor normal do
mousse, e bloqueando seus sinais, para não ser possível clicar novamente na imagem,
com base na documentação do QT sobre o QSignalBlocker encontrado em (QT,m), após
bloquear seus sinais fazemos uma verificação para ver se foi a primeira carta virada, caso
seja adicionando suas informações na variável de seu parente novo_widget, caso não seja
fazendo sua comparação se a primeira carta condiz com a carta virada atualmente, caso
seja muda a variável de conjunto para verdadeiro, e passando qual o conjunto encontrado,
e resetando a variavel da primeira carta, caso não seja uma combinação broqueamos o sinal
de todas as clicklabels, acessando pelo seu parente novo_widget e achando todos seus filhos
do tipo Qlabel utilizando as funções de QObject presentes em todos as widgets criadas,
com base na documentação do QT em (QT,i), para podermos deixar a carta virada por um
tempo, antes de desvirar ambas as cartas, temos que usar um contador de tempo, podendo
ser encontrado como ser utilizado em materiais de apoio como em (BLACKFENIX06,
2017), após o tempo definido em 500 milisegundos passar, vamos desvirar ambas as cartas,
e acessar seu parente novo_widget para liberar o sinal de todas as cartas com a imagem
de fundo, tendo alterado a função agua, é copiala para as outras funções de receptores e
mudar apenas as variaveis tipo e nome no começo da função.
Capítulo 2. Desenvolvimento dos jogos 66
Figura 42 Selecionando a centralwidget para promove-la
Capítulo 2. Desenvolvimento dos jogos 67
Figura 43 Selecionando a classe especial novo_widget recém criada
1#Criando a nova c l a s s e novo_widget baseada no QWidget para armazenar as
v a r i á v e i s de compara ção , para s e r usado nas fun ç õ e s do c l i c k l a b e l .
2class novo_widget ( QWidget ) :
3#Criando a fun ç ão de i n i c i a l i z a ção , que se executa cada vez que o
programa c r i a uma nova widget u t i l i z a n d o o novo_widget , n ess e caso
apena s o c e n t r a l w i d g e t , e s eta n do quem é s eu p are nte , n e s s e c as o é o
MainWindow , por ém como não vamos u t i l i z á lo , estamos como nenhum , None
4de f __init__ ( s e l f , parent=None ) :
5#G ar antindo su a exe cu ç ã o
6super ( ) . __init__ ( p aren t )
7#Setand o uma v a r i á v e l na pr ó p r i a widget , por i s s o chamamos o s e l f e
usamos o ponto para d e f i n i r que f az part e dele , que vamos usar e s s a v ar i
á v e l para armazenar o l o c a l da p r im e ir a c arta , para poder t r a b a l h a r com
e l a cas o , o c onj u n to s e j a v e rd ad ei ro , tr av ando , e c a s o nã o s e j a ,
d e s v i r a r a c a rta , d e f i n i m o s s eu v a l o r i n i c i a l como um t e x t o v a z i o
8self . primeira_carta = ""
9#Setando uma v a ri á v e l na pró p r ia widget , como no a n t e r i o r usando o s e l f
e ponto , e s s a v a r i á v e l v ai armaze nar o t i p o da c ar t a , que v a i s e r o
nome usad o p ara f a z e r as compara ç õ e s , d e f i n i m o s s eu v a l o r i n i c i a l como
um texto vazio
10 self . tipo_primeira_carta = ""
Capítulo 2. Desenvolvimento dos jogos 68
11 #Setando uma v a ri á v e l na pró p r ia widget , como no a n t e r i o r usando o s e l f
e ponto , e s s a v a r i á v e l va i armazenar s e o c on junto das c a r t a s
s e l e c i o n a d a s e s t ão c o r r e t a s ou não , d ef in imo s seu va l or i n i c i a l como
falso
12 s e l f . conjunto = Fa l se
13 #Setando uma v a ri á v e l na pró p r ia widget , como no a n t e r i o r usando o s e l f
e ponto , e s s a v a r i á v e l va i armazenar o nome do c onjunto das c a r t a s
c o r r e t a s , d e f i n i m o s s eu v a l o r i n i c i a l como um t e x t o v a z i o
14 s e l f . conjunto_nome = ""
15 #Setando uma v a ri á v e l na pró p r ia widget , como no a n t e r i o r usando o s e l f
e ponto , e s s a v a r i á v e l v ai armazenar a q uan ti dad e de c o nj unt os c o r r e t o s
, n e s c e s s a r i o para sab e r s e venceram o j ogo da me r i a , d e fi n im o s seu
v a l o r i n i c i a l em z e ro
16 s e l f . contador_conjunto = 0
digo 17 Criação da classe novo_widget
1@Slot ( )
2de f agua ( s e l f ) :
3#Aqui vamos d e f i n i r t i p o de p r e f i x o , materia ou mol ecul a , confo rme o
u ni c o . q rc que f o i c r i a d o no QT D e signer
4t i p o = " materia "
5#Aqui vamos d e f i n i r o nome do a p e l i d o co nforme o u nico . qrc que f o i c r i a d o
no QT De s i g n er
6nome = " agua"
7#Aqui criamos o caminho para imagem , u t i l i z a n d o as v a r i á v e i s d e f i n i d a s
acima , para i s s o usamos de t e x t o + v a r i á v e l , n e s s e c as o usamos + pa ra
c o nc ate nar d o i s t e x t o s s epa r ad o s , ou c o n cat ena r t e x t o com v a r i á v e l ,
n e ss e cas o ":/ " + t i p o va i r e s u l t a r em " : / m ateria " e ao u t i l i z a r +"/"+nome
v ai co nc a tenar o r e s u l t a d o a n t e r i o r com " / agua " , r e s u l ta n do em " : /
materia / agua " , que é o caminho para a imagem de agua
8caminho = ":/"+t i p o+"/"+nome
9
10 #Vamos u sar o QPixmap , usando o caminho c r i a d o a n te r iormente , usando o u
a nt e s do t e x t o para d e f i n i r , que v a i s e r um t e x t o uni co de , pa ra
a c e i t a r acentua ç õ e s e o ut ros c a r a c t e r e s e s p e c i a i s sem problemas , usando
assim o u " " e concatenando o caminho com o u""+ caminho
11 pixmap = QPixmap( u""+caminho )
12 #Aqui chamamos a p r ó p r i a l a b e l com o s e l f e d e f i n i m o s uma nova imagem
usando o pixmap c r i a d o a n te r iormente , ao c on tr á r i o de ant es , nã o
prec i s a mos f a z e r v e r i f i c a ç ão , e vamos apenas mudar a f a c e
13 s e l f . setPixmap ( pixmap )
14
15 #Criamos o c u r s o r como normal
16 c u r s o r = QCursor ( Qt . ArrowCursor )
17 #Aqui chamamos a p r ó p r i a l a b e l com o s e l f e d e f i n i m o s o novo c u r s o r
criado
18 s e l f . s e tC ur so r ( c u r s o r )
Capítulo 2. Desenvolvimento dos jogos 69
19
20 #Aqui chamamos a pr ó p r ia l a b e l e bloqueamos s eus s i n a i s , para que não s e
possa mais c l i c a r enquanto e s t á com a f a c e para cima .
21 s e l f . b l o c k S i g n a l s ( True )
22
23 #Vamos v e r i f i c a r se j á e x i s t e uma p r im e ir a ca r t a no par e n t e da l a b e l , por
i s s o chamamos a l a b e l com s e l f usamos o ponto para i d e n t i f i c a r sua l i g a
ç ão , e chamamos s eu parent e e v e r i f i c a m o s se sua v a r i á v e l
tipo_primeira_carta está vazia
24 i f ( s e l f . p a rent ( ) . t i p o _primeira_ c a r t a == "" ) :
25 #Caso a v a r i á v e l e s t e j a v az i a , qu er d i z e r que nã o t e v e uma p r i m e i r a
c a rt a ainda , ent ão vamos a d i c i o n a r o s v a l o r e s de ssa l a b e l como p r im ei ra
carta
26 #Aqui estamos passando o caminho da l a b e l para o par e n te na v a ri á v el
primeira_carta
27 s e l f . parent ( ) . p r i meira _ c arta = s e l f
28 #Aqui estamos mudando a v a r i a v e l tipo_prim ei ra_carta para agua
29 s e l f . parent ( ) . tip o _ p r imeira_car t a = nome
30 #Aqui s e v e r i f i c a s e o p r im e ir o i f d er f a l s o , ne ss e c a s o não e s t i v e r
v az i o , s e o t i p o da p r i m e i r a c a r t a é agua
31 elif ( s e l f . parent ( ) . tip o _ p r imeira_car t a == nome ) :
32 #Caso o t i p o s e j a agua , qu er d i z e r que a p r i m e i r a c a r t a e r a do t i p o
agua também, portanto fazendo um conjunto
33 #Aqui e stamos mudando o v a l o r da v a r i á v e l c onjunto do p a rente pa ra
v e rda de iro , achou uma combina ç ã o
34 s e l f . parent ( ) . conjunto = True
35 #Aqui e stamos mudando o v a l o r da v a r i á v e l conjunto_nome do p aren te para
agua
36 s e l f . parent ( ) . conjunto_nome = nome
37 #Aqui e stamos aumentando o v a l o r da v a r i á v e l c on ta do r_ co nj unto do
p arent e em 1 , p o i s achou uma combina ç ã o
38 s e l f . parent ( ) . contador_conjunto += 1
39 #Aqui e st am os mudando o v a l o r da p r i m e i r a c a r t a novamente para v a zi a ,
p o i s achou um par , tem que a ch ar outro par
40 s e l f . parent ( ) . p r i meira _ c arta = ""
41 #Aqui e st am os mudando o v a l o r do t i p o da p r i m e i r a c a r t a novamente pa ra
vazia , p o i s achou um par , tem que ach ar outro par
42 self . parent () . tipo_primeira_carta = ""
43 #Aqui s e não pa ssa r em nenhumas das v e r i f i c a ç õ es , resumindo caso , não
e s t e j a vazio , nem s e j a uma combina ç ão , resumindo duas c a r t a s de t i p o s
diferentes
44 e l s e :
45 #Agora que as c a rt a s foram e s c o l h i d a s erradas , temos que v o l ta r a f ac e
para fundo , a p arte de t r á s , que i n i c i a l m e n t e tinha , por ém temos que
d e i x a r p or um tempo para poderem v e r qual c a r t a er á , e e nq ua nto se
espera , temos que i m p edir que c o n tinue virando ou t ra s c arta s , para i s s o
vamos b l oq u ear t odos os s i n a i s , a t é d e s v i r a r as c a r t a s .
Capítulo 2. Desenvolvimento dos jogos 70
46 #Aqui u t i l i z a m o s f o r que s i g n i f i c a para cada , n e ss e c aso para cada
l a b e l no par e n t e de s s e o b j e t o , s e l f . p a rent ( ) , ache seu s f i l h o s que sejam
l a b e l s , . f i n d C h i l d r e n ( QLabel ) , como é mais de um f i l h o temos que
u t i l i z a r o f or , par a t r a b a l h a r com cada l a b e l
47 f o r l a b e l i n s e l f . p arent ( ) . f i n d C h i l d r e n ( QLabel ) :
48 #Aqui v e r i f i c a m o s s e a l a b e l do p are nte e s t á com o c u r so r de p onte iro
, que s i g n i f i c a que é a par te de t r á s , e pode s e r c l i c a d o .
49 i f l a b e l . c u r s o r ( ) == QCursor ( Qt . Pointin gHandCur sor ) :
50 #Caso s e j a o c u r s o r de p o nt eir o , b l o q u e i e s e us s i n a i s .
51 l a b e l . b l o c k S i g n a l s ( True )
52
53 #Criamos um c i c l o ( loop ) para p a ss ar o tempo , d e f i n i n d o u t i l i z a n d o
QEventLoop ( )
54 lo op = QEventLoop ( )
55 #Tendo c r i ad o o l oop u t i l i z a m o s o QTimer para f a z e r um c i c l o ú nico ,
s i n g l e S h o t de 500 m ili segund os , e d e po is e n c e r r a r o l oop .
56 QTimer . s i n g l e S h o t ( 500 , loop . q u i t )
57 #Aqui e xec uta mos o loo p , pa ra p a s s a r 500 m i l i s e g u n d o s a n t e s de
co ntin uar a usar o a p l i c a t i v o
58 loo p . exec_ ( )
59
60 #Agora ap ó s o l o op de 500 m i l i se gu ndo s , vamos v i r a r a p r i m e i r a c a r t a e
a segunda c a r ta de v o l t a para t r á s , vamos c a r r e g a r a imagem de fundo no
pixmap
61 pixmap = QPixmap( u" :/ imagens / fu ndo_carta " )
62 #Aqui d e f i n i m o s a p r ó p r i a l a b e l de v o l t a para o fu ndo
63 s e l f . setPixmap ( pixmap )
64 #Aqui d e f i n i m o s a l a b e l que e s t á armazenada no seu p a re n t e d e ntro do
p r i m e i r a c ar t a , de v o l t a para o f undo
65 s e l f . p a r ent ( ) . p r imeira_ c arta . setPixmap ( pixmap )
66
67 #Aqui c ri amos um c u r s o r de p o n t e i r o
68 c u r s o r = QCursor ( Qt . Po inting HandCurs or )
69 #Aqui d e f i n i m os a pr ó p r i a l a b e l de v o l t a pa ra p o n t e i r o
70 s e l f . s e tC ur so r ( c u r s o r )
71 #Aqui d e f i n i m o s a l a b e l que e s t á armazenada no seu p a re n t e d e ntro do
p r i m e i r a c ar t a , de v o l t a para p o n t e i r o
72 s e l f . p arent ( ) . p r im eira _car ta . s e t Cu rso r ( c u r s o r )
73
74 #Aqui vamos f a z e r o mesmo f o r de a n tes s ó que n es s e caso para
de sblo quea r a a p l i c a ç ão
75 f o r l a b e l i n s e l f . p arent ( ) . f i n d C h i l d r e n ( QLabel ) :
76 i f l a b e l . c u r s o r ( ) == QCursor ( Qt . Pointin gHandCur sor ) :
77 #Caso s e j a o c u r s o r de p o nt eir o , d e s b l o q u e i e s e us s i n a i s .
78 l a b e l . b l o c k S i g n a l s ( F als e )
79
80 #Apó s t e r mudado todos de v o l ta ao normal , vamos v o l t a r as v ar i á v e i s do
Capítulo 2. Desenvolvimento dos jogos 71
p a ren te da l a b e l p ara v a z i o
81 s e l f . parent ( ) . p r i meira _ c arta = ""
82 #Def in im os a v a r i á v e l do p arente des sa l a b e l chamado
tipo_primeira_carta de volta para vazio
83 self . parent () . tipo_primeira_carta = ""
digo 18
Alteração da função do receptor agua para fazer suas comparações com as
cartas viradas, para verificar se é uma combinação
2.2.9 Criando o segundo digo aplicativo.py
Na subsecção anterior criamos a primeira parte do digo, com todas as funções de
troca separadamente, com a verificação se foi achado uma combinação de cartas, nessa
subsecção vamos começar a criar a segunda parte do digo, trocando de imagem fixa
para aleatória, e deixando a função dos receptores indenticas sem precisar mudar seu
nome ou tipo, para ficar mais fácil de se trabalhar é bom minimizar as funções para
não ocupar muito espaço, para fazer a mudança entre as imagens fixas por carta para
aleatória não vamos precisar mexer muito na função de água, sendo sua unica mudança
a alteração entre tipo e nome por self.tipo e self.nome, sendo algo da própria label que
se referencia por self., para começar a desenvolver, precisamos importar a biblioteca de
aleatoridade chamada random, podendo utilizar a documentação do Python sobre random
em (PYTHON,b) como material de apoio, fazendo sua importação juntamente ao sys e
time, conforme pode ser observado no digo 19, outra mudança nessesaria é a criação de
uma lista em novo_widget, com duas listas dentro com os nomes das imagens, sendo cada
lista de nomes a representação de materia e molecula, tendo mais informações sobre como
trabalhar e utilizar listas em (W3 Schools, ), contendo a criação da lista dentro da função de
inicialização __init__ do novo_widget adicionando abaixo de contador_conjunto como
uma nova variável do tipo lista que vamos nome-ala de lista, conforme pode ser observado
no digo 20, apos ter atualizado o import e a classe novo_widget, vamos começar a mudar
o __init__ da clicklabel, conforme o digo 21, a função __init__ é executada ao criar
cada label utilizando a classe clicklabel, como vai ser executado varias vezes, começamos
verificando a quantidade de nomes dentro das listas do seu parente novo_widget, e ao ter
a quantidade, fazemos verificações se ambas não estão vazias, caso não estejam utilizamos
a biblioteca do random para escolher uma lista e nome aleatoriamente, e após escolhido,
adicionamos ao self.tipo qual foi a lista e self.nome qual foi o nome e deletamos o nome
de dentro da lista, para evitar repetições, e depois temos verificações caso uma das listas
esteja vazia, para usar a lista que ainda possui nomes, ao arrumar o __init__ vamos
mudar às funções dos receptores, removendo às duas primeiras linhas de (tipo = "materia")
e (nome = "agua") que não precisaremos mais, pois vamos usar às quais foram criadas no
__init__, que foi executado quando a label foi criada, e tem que mudar os locais, onde
Capítulo 2. Desenvolvimento dos jogos 72
se encontra nome por self.nome e tipo por self.tipo, tendo feito em uma delas vai ser
necessário copiar para as outras.
1#Importando o sistem a , tempo e fun ç õ e s para a l e a t o r i e d a d e do python abaixo ,
e a l i n h a de cima d e f i n e o t i p o de c ó digo a s e r usado no python , o
hashtag (#) é u t i l i z a d o para d e f i n i r coment á r i o s .
2import sys , time , random
digo 19 Novo importes com time e random
1#Criand o uma v a r i á v el , com uma l i s t a , que p o s s u i duas l i s t a s den tro , par a
d e c l a r a r uma l i s t a u t i l i z a m o s c o l c h e t e s , uma l i s t a v a zi a é d e f i n i d o por
[ ] , n e s se caso cria mos uma l i s t a , com duas l i s t a s dentro , [ [ ] , [ ] ] , para
r e p r e s e n t a r que a p r im ei ra l i s t a é de m at eria e a segunda é mo lecu la ,
po d er i a u t i l i z a r um d i c i o n á r i o para f a z e r i s s o , por ém s e r i a mais
complexo , por e s s e motivo f o i e s c o l h i d o u sar l i s t a s , dentro das l i s t a s ,
s e e s c r e v e os nomes p e r t e n c e n t e ao s a p e l i d o s c r i a d o s no u nico . qrc , se ndo
e l e s " agua " , " ferrugem " , " fumaca " , " s a l "
2s e l f . l i s t a = [ [ "agua " ,"ferrugem " ," fumaca " ,"sal" ] , [ "agua " ,"ferrugem" ,"fumaca
","sal" ] ]
digo 20 Adicionando uma lista para o novo_widget
1de f __init__ ( s e l f , parent=QWidget ) :
2#Gar an tindo que v a i f u nc io nar , e v a i a c i o n a r todas as v e z e s com o s u per ( )
3super ( ) . __init__ ( p aren t )
4
5#Aqui e st am os vendo a q u an tid a de de nomes d entro da p r i m e i r a l i s t a , s en do
quan tid ade de m at eria , usando l e n ( ) , que c ont a q uantidades de i t e n s
dentro de o b j e t o s no python , e nt ã o v e r i f i c a m o s a p o s i ç ão 0 da l i s t a ,
l i s t a [ 0 ] , c o nside r a ndo que l i s t a e s t á em seu parente , por i s s o s e l f .
parent ( ) . l i s t a [ 0 ] , em linguagem de programa ção é normal começ ar as
c ontag en s em 0 , p or i s s o a p r i m e i r a p o s i ç ão de uma l i s t a é 0 em vez de 1
6quantidade_materia = l e n ( s e l f . p a r ent ( ) . l i s t a [ 0 ] )
7#Aqui estamos vendo a quanti dade de nomes dentro da segunda l i s t a , sendo
quantidade de m o lecula
8quantidade_molecula = l e n ( s e l f . p a r e nt ( ) . l i s t a [ 1 ] )
9
10 #Aqui v e r i f i c a m o s s e a qua nt id ad e de mater ia e mole cula s ão m ai or es que
0 , resumindo s e as l i s t a s não e s t ão v a zia s , p ode r ia s e r usado uma
s i m p l e s compara ç ã o com [ ] , po r ém para f i c a r mai s f á c i l o e ntendimento ,
u t i l i z a m o s a quant idade , para i s s o comparamos a v a r i á v e l de materia , e
usamos um s i n a l i z a d o r and que s i g n i f i c a e , e comparamos a v a r i á v e l
de molecula , o and s i g n i f i c a que s ó e x e c u t a s e ambas as compara ç õ es
deram p o s s i t i v o , caso s e j a n e c e s s a r i o uma ou o utro s e usa o r , mas
n e ss e caso apenas queremos s e ambas forem p o s s i t i v a s .
11 i f ( quantidade_materia > 0) and (quantidade_molecula > 0) :
12 #Sendo ambas maiores de z e ro vamos c r i a r um s e l e t o r a l e a t o r i o en tr e
molecula e materia
Capítulo 2. Desenvolvimento dos jogos 73
13 #Aqui e st amos usando uma da s fun ç õ e s do random , a fun ç ã o r andi n t , que
gera um número a l e a t ó r i o e n tr e o i n i c i a l e o f i n a l passados para fun ç ão ,
n e ss e caso 0 e 1 , ale a to r iam e nt e , sendo e l e para d e f i n i r qual das
l i s t a s v a i s e r usada a p r i m e i r a ou a se gunda
14 t i p o _ a l e a t o r i o = random . r an din t ( 0 , 1 )
15 #Aqui faz em os uma v e r i f i c a ç ã o s e o número g era do a l e a t o r i a m e n t e f o i 0
16 i f tipo_aleatorio == 0:
17 #Se o número f o i 0 , s i g n i f i c a que v a i usar a p r i m e i r a l i s t a , que
estamos usando para r e p r e s e n t a r materia , por i s s o vamos d e f i n i r o t i p o
como materia
18 s e l f . t i p o = "materia "
19 #Aqui v e r i f i c a m o s s e todas as o u tra s v e r i f i c a ç õ e s deram n eg ativ as ,
n e s s e c as o s e f o i 1
20 e l s e :
21 #Sendo 1 d e f i n i m o s o t i p o como m o le c ul a
22 s e l f . t i p o = "molecula"
23 #Aqui vamos p eg ar um d os nomes d entro da l i s t a a l e a t o r i a m e n t e usando
uma fun ç ão do random chamada c hoice , e a l i s t a que va i pegar va i s e r
a l e a t o r i a , usando o t i po que f o i c r ia d o ant erio rmen te
24 s e l f . nome = random . c h oi c e ( s e l f . p aren t ( ) . l i s t a [ t i p o _ a l e a t o r i o ] )
25 #Agora que pegamos o nome a leat o riam e nte , vamos remover e l e da l i s t a ,
para não t e r r e p e t i ç ão , na proxima vez que b u scar um nome , para i s s o
usamos a fun ç ão temove da l i s t a , passando o nome que f o i e s c o l h i d o
anteriormente
26 s e l f . p aren t ( ) . l i s t a [ t i p o _ a l e a t o r i o ] . remove ( s e l f . nome )
27
28 #Aqui v e r i f i c a m o s s e quan tida de_materia é maior que 0 , e s e a
quantidade_molecula é 0
29 elif ( quantidade_materia > 0) and (quantidade_molecula == 0) :
30 #Caso molecu l a e s t e j a v azia , e materia tenha nomes ainda , vamos
t r a b a l h a r apenas com a p r i me ir a l i s t a , que é a de m at eria . por i s s o
vamos u s ar o c h o i c e com a l i s t a [ 0 ]
31 s e l f . nome = random . c h o i c e ( s e l f . p arent ( ) . l i s t a [ 0 ] )
32 #Vamos re mo ve r o nome da p r i m e i r a l i s t a
33 s e l f . parent ( ) . l i s t a [ 0 ] . remove ( s e l f . nome )
34 #Vamos s e t a r que o t i po vai s er m at er ia
35 s e l f . t i p o = "materia "
36
37 elif ( quantidade_materia == 0) and (quantidade_molecula > 0) :
38 #Caso materia e s t e j a va z ia , e molecula tenha nomes ainda , vamos
t r a b a l h a r apenas com a segunda l i s t a , que é a de m ole cula . p or i s s o
vamos u s ar o c h o i c e com a l i s t a [ 1 ]
39 s e l f . nome = random . c h o i c e ( s e l f . p arent ( ) . l i s t a [ 1 ] )
40 #Vamos remover o nome da segunda l i s t a
41 s e l f . parent ( ) . l i s t a [ 1 ] . remove ( s e l f . nome )
42 #Vamos s e t a r que o t i po vai s er m olecula
43 s e l f . t i p o = "molecula"
Capítulo 2. Desenvolvimento dos jogos 74
digo 21 Alterando o inicializador do clicklabel para torna-lo aleatório
2.2.10 Finalizando a interface
Na subsecção anterior alteramos a função de troca de imagem por uma genérica
aleatória ao ser criado a label, com o código identico para todas as funções dos receptores,
nessa subsecção vamos voltar ao QT design para fazer a tela de informações quando
uma combinação certa, e unificar às funções, agua, ferrugem, . . . , em apenas uma única
função mudar_face, para isso vamos voltar clicklabel, selecionar qualquer um deles com o
botão direito e apertar change signals
\
slots, conforme pode ser observado na figura 44,
para voltarmos a mudar seus slots criados, nesse caso vamos usar o - para remover todos
os slots, conforme a figura 45 e criar no lugar de todas as funções vamos criar a função
mudar_face() e confirmar as mudanças, conforme pode ser observado na figura 46, e agora
vamos ir no editor de sinais embaixo do windows, como feito na subsecção 2.2.7, para
mudar às ligações existente das funções agua, ferrugem,... para a função mudar_face(),
vamos selecionar um deles, com o botão direito, e apertar selecionar todos, select all,
conforme a figura 47, e depois de selecionado todos apertamos o botão delete do teclado,
para remover todos as ligações existentes, para poder criar todos novamente utilizando a
seta vermelha, fazendo as ligações de cada clicklabel com ela mesma, utilizando o sinal
click() e o receptor mudar_face(), ficando a interface conforme a figura 48, tendo apenas as
setas em locais diferentes, e a label jogo da memoria está em vermelho por ter selecionado
ele, para ficar mais visível as labels de cartas.
Capítulo 2. Desenvolvimento dos jogos 75
Figura 44 Selecionando change signals\slots na clicklabel
Capítulo 2. Desenvolvimento dos jogos 76
Figura 45 Selecionando a função para deletar usando o sinal de menos
Capítulo 2. Desenvolvimento dos jogos 77
Figura 46
Confirmando as mudanças, após ter deletado todas as funções e criado em
sue lugar a função mudar_face
Capítulo 2. Desenvolvimento dos jogos 78
Figura 47 Selecionando todos os links
Capítulo 2. Desenvolvimento dos jogos 79
Figura 48 Visualização dos links após deletar e recria-los como mudar_face
2.2.10.1 Criação da nova widget escondido
Nessa sub-subsecção vamos voltar para o editor de widgets, que fica ao lado do
editor de sinais no canto esquerdo superior, criar uma widget para mostrar o informativo
da combinação correta das cartas, para isso vamos na caixa de widgets, encontrado na
esquerda, abrir o container, e arrastar Widget para tela, e selecionar seu tamanho para
condizer com o tamanho de todas as imagens, conforme pode ser observado na figura 49, e
mudando seu plano de fundo para uma cor diferente, usando o editor de propriedades, na
aba QWidget, mudando o stylesheets, para abrir o editor de estilos, conforme a figura 50, e
adicionar uma cor de plano de fundo, usando o RGB sendo ele vermelho, verde e azul, para
definir qual é a cor a ser utilizado, ou usando o mouse para mover o ponteiro para a cor
desejada, nesse caso utilizaremos uma cor cinza com o rgb(170,170,170), conforme pode ser
observado na figura 51, fazendo a widget ficar conforme a figura 52, tendo arrumado a cor
vamos promover a Widget para um novo tipo o qual vamos chamar de escondido, conforme
pode ser observado na figura 53 e54, pois na aplicação essa widget não vai ser visível
até ter uma combinação certa, e adicionar um receptor chamado mudar_informativo(),
Capítulo 2. Desenvolvimento dos jogos 80
conforme pode ser observado na figura 55, para mudar a imagem baseado em qual o nome
da combinação.
Figura 49 Criando nova widget
Figura 50 Abrindo o stylesheet e selecionando mudança de plano de fundo
Capítulo 2. Desenvolvimento dos jogos 81
Figura 51 Selecionando a cor do plano de fundo com o sistema RGB de cor
Capítulo 2. Desenvolvimento dos jogos 82
Figura 52
Visualização da widget após setar sua cor para cinza com o rgb(170,170,170)
Capítulo 2. Desenvolvimento dos jogos 83
Figura 53 Selecionando a Widget para promove-la
Capítulo 2. Desenvolvimento dos jogos 84
Figura 54 Criando nova classe especial escondido
Capítulo 2. Desenvolvimento dos jogos 85
Figura 55 Criando novo sinal mudar_informativo para a classe escondido
2.2.10.2 Criação dos links e a label da widget escondido
Na sub-subsecção anterior fora criado a widget escondido, e trocado sua cor de
fundo para cinza utilizando o rgb(170,170,170), e criado sua função de trocar informativo,
nessa sub-subsecção vamos criar as ligações entre as cartas e a widget escondido e criar uma
label para mostrar a imagem do informativo, selecionado a widget escondido aperte Ctrl +
K e Ctrl + L para mudar quem vai por cima ou por baixo, nesse caso vamos apertar Ctrl +
K para fazer a widget ir por baixo para podermos ver as labels das cartas, conforme pose
ser observado na figura 56, tendo feito esses passos, vamos ir no editor de sinais, na parte
superior esquerda, para ligar todas às clicklabels, com a widget escondido, conectando o
sinal click() das labels, com o receptor mudar_informativo() da widget, conforme pode
ser observado na figura 57, ao fazer a ligação em todas as clicklabels, conforme pode ser
oberservado na figura 58, voltamos ao editor de widgets, no canto superior esquerdo, ao
lado do editor de sinais, selecionamos a widget escondido e apertamos Ctrl + L para
fazer ela voltar para frente, e vamos adicionar uma label para carregar as imagens de
informação, e usando o pixmap no editor de propriedades na aba QLabel, selecionamos
uma das imagens de informativo, qualquer uma serve, que ela vai ser mudada antes
de mostrar em tela baseado no tipo de combinação, nesse caso vamos pegar ferrugem, a
Capítulo 2. Desenvolvimento dos jogos 86
imagem de marte, e escolhemos para escalar o conteúdo para caber na label, e ajustamos
a label para o tamanho da widget escondido, deixando um espaço na parte inferior para
colocar um botão, conforme pode ser observado na figura 59
Figura 56 Visualização da interface após mudar a widget escondido para o fundo
Capítulo 2. Desenvolvimento dos jogos 87
Figura 57
Criando os links entre o sinal click da clicklabels e o receptor mu-
dar_informativo da widget escondido
Capítulo 2. Desenvolvimento dos jogos 88
Figura 58
Visualização dos links após criar os links entre a clicklabel e o widget escondido
Figura 59 Criação de uma label comum com uma imagem de informativo
Capítulo 2. Desenvolvimento dos jogos 89
2.2.10.3 Criação de botão na widget escondido e a criação do link entre eles
Na sub-subsecção anterior criamos os links entre as cartas e a widget escondido,
juntamente com a criação de uma label dentro da widget escondido para mostrar a imagem
do informativo, nessa sub-subsecção vamos finalizar a utilização do Qt Designer, criando
um botão na widget escondido, e fazendo sua ligação com o widget escondido para ocultar
a widget ao ser clicado, para adicionar o botão vamos voltar na caixa de widgets, na
aba buttons, selecionar o pushbutton, colocando abaixo da label de imagem, conforme
pode ser observado na figura 60, com o botão criado vamos mudar seu conteúdo escrito
para continuar, como se faria na label, e para ficar mais visível também vamos mudar
seu stylesheet, para adicionar uma cor de fundo mais clara, perto do branco, usando
rgb(240,240,240), conforme pode ser obersavado na figura 61, agora vamos voltar no editor
de sinais, para criar a ligação do botão continuar com o widget escondido, o botão tem
opção clicked(), portanto não é necessário promovê lo, apenas linkar a função clicked()
do mouse, com a função hide() que serve para esconder a tela do widget escondido, que
não é visível, pois é do nativo QWidget, para isso vamos ter que selecionar que queremos
ver às funções nativas, conforme pode ser observado na figura 62, tendo selecionado a
opção podemos ver as opções herdadas do QWidget tendo entre elas a função hide(),
conforme pode ser observado na figura 63, no editor de sinais e receptores, do canto inferior
direito todas as ligações entre sinais e receptores, de uma forma mais visivel que a tela da
aplicação, conforme pode ser obersavo na figura 64.
Figura 60 Criação de botão
Capítulo 2. Desenvolvimento dos jogos 90
Figura 61
Alteração da cor do botão para branco com o rgb(240,240,240) utilizando o
stylesheet após ter mudado seu texto para continuar
Capítulo 2. Desenvolvimento dos jogos 91
Figura 62 Habilitando a visualização dos sinais e receptores herdados da QWidget
Capítulo 2. Desenvolvimento dos jogos 92
Figura 63
Criação do link entre o sinal clicked do botão e o recptor hide da widget
escondido que fora herdado do QWidget
Figura 64
Visualização dos links da interface, juntamente com a aba de sinais e receptores
Capítulo 2. Desenvolvimento dos jogos 93
2.2.11 Criando o terceiro e ultimo digo aplicativo.py
Na subsecção anterior fora terminado a interface com a utilização do Qt Designer,
nessa subsecção vamos converter o interface.ui para python, substituir o Ui_MainWindow
pelo atual, e mudar as funções especificas agua, ferrugem, ... para apenas mudar_face,
vamos criar a classe escondido, para começar novamente temos que converter a aplica-
ção.ui para .py, usando o terminal no local da pasta, usando o comando 7, e copiar o
conteudo Ui_MainWindow para o aplicativo.py, como fora realizado anteriormente na
sub-subsecção 2.2.8.4, sendo importante ter seguido a sequência de conexões entre sinais e
receptores, fazendo todas as mudar_face primeiro e depois todos os mudar_informativo,
para que as conexões ao criar o arquivo python fique em sequência, pois precisamos de que
mude a face antes de mudar informativo, seguindo a sequência certa ele fica conforme o
digo 22, com execção do comentário antes do retraslateUi, que fora escrito para identificar
a parte mencionada da sequencia entre as conexões, seguindo mudar_face primeiro e
depois mudar_informativo, Agora que mudamos o tipo de função para mudar_face(),
podemos excluir todas às funções repetidas, mantendo apenas agua, e mudando o nome
de agua para mudar_face, tendo feito isso no lugar de varias funções repetidas com nomes
diferente dentro da classe clicklabel vai possuir apenas uma função mudar_face, conforme
pode ser observado no digo 23, tendo em vista as mudanças de nome para self.nome e
tipo para self.tipo, conforme mencionado na subsecção 2.2.9, agora vamos trabalhar na
criação da nova classe escondido, após clicklabel e antes de MainWindow, começa criando
a função de inicialização e definindo que a própria widget vai ser escondida, após isso
criamos uma função de pintura pois widgets promovidas não recebem mudanças de cor do
stylesheets, porém não é necessário criar a função, tem vários matérias de apoio para esse
detalhe explicando sobre esse detalhe e disponibilizando o função pronta para arrumar
esse detalhe, como por exemplo os sites (USER7797,2013;ORENSBRULI,2019), depois
da função de pintura para que a cor de plano de fundo funcione, vamos mudar a função de
ocultar, adicionando uma nova instância ao ocultar a widget, que é uma verificação se
fora encontrado todas as quatro combinações de cartas, resumindo se o jogo de memoria
foi completado, para caso tenha sido vencido, mostrar uma mensagem na tela de parabéns
e fechando o jogo ao ser clicado no botão da mensagem, ou fechado a mensagem, para
entender mais sobre como utilizar o QMessageBox, pode ser observado a documentação
oficial em (QT,h) e também pode ser observado varios materias de apoio na internet caso
o official não seja o suficiente como por exemplo seja desejado mudar o estilo da caixa
de mensagem, pode ser encontrado em (KOAN,2011), nesse caso estamos criando uma
simples com verificação se foi fechado ou apertado ok, para isso começamos fazendo a
verificação se é a ultima combinação, mostramos "Parabens vo venceu"no terminal do
python, criamos a caixa de mensagem, definimos seu titulo para "Parabéns", definimos a
qual vai ser a mensagem, nesse caso "Parabens vo venceu", definimos qual vai ser o botão
utilizado does padrões nesse caso o close, e então definimos qual vai ser o botão padrão
Capítulo 2. Desenvolvimento dos jogos 94
que vai ser pré-selecionado, nesse caso também vamos usar o botão close, tendo criado
a mensagem vamos capturar qual foi o sinal executado, ao executar vai armazenar na
variável ret, e então verificamos qual foi o botão selecionado, verificando se o close foi
selecionado, nesse caso possui apenas um botão close, mas caso possua mais de um botão
pode ser verificado qual deles foi acionado, fazendo coisas diferentes para cada botão, por
ultimo temos a criação da função receptora slot do mudar_informativo, considerando
que em sua maioria vamos estar trabalhando com o parente da widget escondido, como
realizado para criação do clicklabel aleatoria na sub-subsecção 2.2.8.7, começando com a
verificação se foi encontrado um conjunto, caso tenha sido mudando a imagem da label
para o nome do conjunto, mudando a widget para visível e então alterando as variáveis de
armazenamento de conjunto para falso e seu nome para vazio, podendo procurar um novo
conjunto depois.
1class Ui_MainWindow( object) :
2de f s etupUi ( s e l f , MainWindow ) :
3i f not MainWindow . objectName ( ) :
4MainWindow . setObjectName ( u"MainWindow")
5MainWindow . r e s i z e ( 5 61 , 546)
6MainWindow . setAutoFillBackground ( F als e )
7s e l f . c e n t r a l w i d g e t = novo_widget ( MainWindow )
8s e l f . c e n t r a l w i d g e t . setObjectName ( u" centralwidget " )
9s e l f . l abe l_ 2 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
10 s e l f . l a b e l _ 2 . setObjectName (u" label_2 " )
11 s e l f . l a b e l _ 2 . setGeometry (QRect (10 , 90 , 121 , 211) )
12 s e l f . l a b e l _2 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
13 s e l f . l a b e l _ 2 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
14 s e l f . l a b el_2 . s e t S c a l e d C o n t e n t s ( True )
15 s e l f . l abe l_ 3 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
16 s e l f . l a b e l _ 3 . setObjectName (u" label_3 " )
17 s e l f . l a b e l _ 3 . setGeometry (QRect (150 , 90 , 121 , 211) )
18 s e l f . l a b e l _3 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
19 s e l f . l a b e l _ 3 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
20 s e l f . l a b el_3 . s e t S c a l e d C o n t e n t s ( True )
21 s e l f . l abe l_ 5 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
22 s e l f . l a b e l _ 5 . setObjectName (u" label_5 " )
23 s e l f . l a b e l _ 5 . setGeometry (QRect (430 , 90 , 121 , 211) )
24 s e l f . l a b e l _5 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
25 s e l f . l a b e l _ 5 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
26 s e l f . l a b el_5 . s e t S c a l e d C o n t e n t s ( True )
27 s e l f . l abe l_ 6 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
28 s e l f . l a b e l _ 6 . setObjectName (u" label_6 " )
29 s e l f . l a b e l _ 6 . setGeometry (QRect (10 , 320 , 121 , 211) )
30 s e l f . l a b e l _6 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
31 s e l f . l a b e l _ 6 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
32 s e l f . l a b el_6 . s e t S c a l e d C o n t e n t s ( True )
33 s e l f . l abe l_ 7 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
Capítulo 2. Desenvolvimento dos jogos 95
34 s e l f . l a b e l _ 7 . setObjectName (u" label_7 " )
35 s e l f . l a b e l _ 7 . setGeometry (QRect (150 , 320 , 121 , 211) )
36 s e l f . l a b e l _7 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
37 s e l f . l a b e l _ 7 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
38 s e l f . l a b el_7 . s e t S c a l e d C o n t e n t s ( True )
39 s e l f . l abe l_ 8 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
40 s e l f . l a b e l _ 8 . setObjectName (u" label_8 " )
41 s e l f . l a b e l _ 8 . setGeometry (QRect (290 , 320 , 121 , 211) )
42 s e l f . l a b e l _8 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
43 s e l f . l a b e l _ 8 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
44 s e l f . l a b el_8 . s e t S c a l e d C o n t e n t s ( True )
45 s e l f . l abe l_ 9 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
46 s e l f . l a b e l _ 9 . setObjectName (u" label_9 " )
47 s e l f . l a b e l _ 9 . setGeometry (QRect (430 , 320 , 121 , 211) )
48 s e l f . l a b e l _9 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
49 s e l f . l a b e l _ 9 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
50 s e l f . l a b el_9 . s e t S c a l e d C o n t e n t s ( True )
51 s e l f . l abe l_ 4 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
52 s e l f . l a b e l _ 4 . setObjectName (u" label_4 " )
53 s e l f . l a b e l _ 4 . setGeometry (QRect (290 , 90 , 121 , 211) )
54 s e l f . l a b e l _4 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
55 s e l f . l a b e l _ 4 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
56 s e l f . l a b el_4 . s e t S c a l e d C o n t e n t s ( True )
57 s e l f . l a b e l = QLabel ( s e l f . c e n t r a l w i d g e t )
58 s e l f . l a b e l . setObjectName ( u"label" )
59 s e l f . l a b e l . setGeometry ( QRect ( 10 , 10 , 541 , 6 1) )
60 s e l f . l a b e l . setTextFormat (Qt . AutoText )
61 s e l f . l a b e l . setWordWrap ( F a lse )
62 s e l f . l a b e l . s e t T e x t I n t e r a c t i o n F l a g s ( Qt . N oT ex tI nt er ac tio n )
63 s e l f . w id ge t = e scon dido ( s e l f . c e n t r a l w i d g e t )
64 s e l f . widget . setObjectName ( u" widget " )
65 s e l f . widget . s e t E nabled ( True )
66 s e l f . widget . setGeometry ( QRect (1 0 , 90 , 541 , 441) )
67 s e l f . widge t . s e t S t y l e S h e e t ( u" background -color : rgb(170 , 170 , 170) ;" )
68 s e l f . pushButton = QPushButton ( s e l f . widg et )
69 s e l f . pushButton . setObjectName ( u"pushButton")
70 s e l f . pushButton . setGeometry ( QRect ( 2 20 , 4 10 , 111 , 23) )
71 s e l f . pushButton . s e tCu r sor ( QCursor ( Qt . PointingHandCursor ) )
72 s e l f . pushButton . s e t S t y l e S h e e t ( u"background -color: rgb (240 , 240,
240);" )
73 s e l f . l a b el_10 = QLabel ( s e l f . widget )
74 s e l f . label_10 . setObjectName ( u" label_10" )
75 s e l f . label_10 . setGeometry ( QRect (0 , 0 , 541 , 401) )
76 s e l f . label_10 . setPixmap (QPixmap( u ":/ informativo / ferrugem " ) )
77 s e l f . l a b el _ 1 0 . s e t S c a l e d C o n t e n t s ( True )
78 MainWindow . s et Ce nt ralWidget ( s e l f . c e n t r a l w i d g e t )
79
Capítulo 2. Desenvolvimento dos jogos 96
80 #p art e impor tan te mencionada , como pode s e r observada ,
p ri meir a me nte f a z a c one x ão e n t r e mudar_face e d e p o i s muda r_i nfo rma tiv o
81 s e l f . r e t r a n s l a t e U i (MainWindow )
82 s e l f . la b e l _ 2 . c l i c k . connect ( s e l f . la b e l _ 2 . mudar_face )
83 s e l f . la b e l _ 3 . c l i c k . connect ( s e l f . la b e l _ 3 . mudar_face )
84 s e l f . la b e l _ 4 . c l i c k . connect ( s e l f . la b e l _ 4 . mudar_face )
85 s e l f . la b e l _ 5 . c l i c k . connect ( s e l f . la b e l _ 5 . mudar_face )
86 s e l f . la b e l _ 6 . c l i c k . connect ( s e l f . la b e l _ 6 . mudar_face )
87 s e l f . la b e l _ 7 . c l i c k . connect ( s e l f . la b e l _ 7 . mudar_face )
88 s e l f . la b e l _ 8 . c l i c k . connect ( s e l f . la b e l _ 8 . mudar_face )
89 s e l f . la b e l _ 9 . c l i c k . connect ( s e l f . la b e l _ 9 . mudar_face )
90 s e l f . la b e l _ 2 . c l i c k . connect ( s e l f . widget . mudar_informativo )
91 s e l f . la b e l _ 3 . c l i c k . connect ( s e l f . widget . mudar_informativo )
92 s e l f . la b e l _ 4 . c l i c k . connect ( s e l f . widget . mudar_informativo )
93 s e l f . la b e l _ 5 . c l i c k . connect ( s e l f . widget . mudar_informativo )
94 s e l f . la b e l _ 6 . c l i c k . connect ( s e l f . widget . mudar_informativo )
95 s e l f . la b e l _ 7 . c l i c k . connect ( s e l f . widget . mudar_informativo )
96 s e l f . la b e l _ 8 . c l i c k . connect ( s e l f . widget . mudar_informativo )
97 s e l f . la b e l _ 9 . c l i c k . connect ( s e l f . widget . mudar_informativo )
98 s e l f . pushButton . c l i c k e d . connect ( s e l f . widget . hide )
99
100
101
102 QMetaObject . connectSlotsByName ( MainWindow)
103 # setupUi
104
105 de f r e t r a n s l a t e U i ( s e l f , MainWindow ) :
106 MainWindow . setWindowTitle ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,
u"MainWindow" , None ) )
107 s e l f . l a b e l _ 2 . s e t T e x t ( "" )
108 s e l f . l a b e l _ 3 . s e t T e x t ( "" )
109 s e l f . l a b e l _ 5 . s e t T e x t ( "" )
110 s e l f . l a b e l _ 6 . s e t T e x t ( "" )
111 s e l f . l a b e l _ 7 . s e t T e x t ( "" )
112 s e l f . l a b e l _ 8 . s e t T e x t ( "" )
113 s e l f . l a b e l _ 9 . s e t T e x t ( "" )
114 s e l f . l a b e l _ 4 . s e t T e x t ( "" )
115 s e l f . l a b e l . s et Te x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<html
><head /><body ><p align =\" center\"><span style =\" font - size :12 pt; font -
weight :600;\" > Jogo da memoria : </ span > </p> <p align =\" center \"> <span style
=\" font -size :10 pt; font - weight :600;\" > Combine as cartas de estrutura
molecular com os materiais correspondentes </span ></p></body ></html >" ,
None ) )
116 s e l f . pushButton . s et Te xt ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"
Continuar" , None ) )
117 s e l f . l a b e l _ 1 0 . s e t T e x t ( "" )
118 # r e t r a n s l a t e U i
Capítulo 2. Desenvolvimento dos jogos 97
digo 22
Nova classe Ui_MainWindow gerada pelas mudanças da interface, com
comentário da parte a ser prestado atenção
1#Criando a c l i c k l a b e l que s e baseado na QLabel , que f o i c r i a d o no QT Design
2class c l i c k l a b e l ( QLabel ) :
3#Criando a fun ç ão de i n i c i a l i z a ção , que se executa cada vez que o
programa c r i a uma nova l a b e l u t i l i z a n d o o c l i c k l a b e l , e setando quem é
seu pa ren te , n e s s e c aso QWidget
4de f __init__ ( s e l f , parent=QWidget ) :
5#Gar an tindo que v a i f u nc io nar , e v a i a c i o n a r todas as v e z e s com o s u per
( )
6super ( ) . __init__ ( p aren t )
7
8#Aqui e st am os vendo a q u an tid a de de nomes d entro da p r i m e i r a l i s t a ,
se ndo q uan tida de de m at er ia , usando l e n ( ) , que con ta q ua n tidades de
i t e n s dentro de o b j et o s no python , ent ã o v e r i f i c a m o s a p o s i ç ão 0 da
l i s t a , l i s t a [ 0 ] , consi d e rando que l i s t a e s t á em seu parente , por i s s o
s e l f . p a rent ( ) . l i s t a [ 0 ] , em linguagem de programa ção é normal come ç ar as
c ontag en s em 0 , p or i s s o a p r i m e i r a p o s i ç ão de uma l i s t a é 0 em vez de 1
9quantidade_materia = l e n ( s e l f . p a rent ( ) . l i s t a [ 0 ] )
10 #Aqui estamos vendo a quanti dade de nomes dentro da segunda l i s t a ,
sendo quantidade de m o lecula
11 quantidade_molecula = l e n ( s e l f . p a r e nt ( ) . l i s t a [ 1 ] )
12
13 #Aqui v e r i f i c a m o s s e a qua nt id ad e de mater ia e mole cula s ão m ai or es que
0 , resumindo s e as l i s t a s não e s t ão v a zia s , p ode r ia s e r usado uma
s i m p l e s compara ç ã o com [ ] , po r ém para f i c a r mai s f á c i l o e ntendimento ,
u t i l i z a m o s a quant idade , para i s s o comparamos a v a r i á v e l de materia , e
usamos um s i n a l i z a d o r and que s i g n i f i c a e , e comparamos a v a r i á v e l
de molecula , o and s i g n i f i c a que s ó e x e c u t a s e ambas as compara ç õ es
deram p o s s i t i v o , caso s e j a n e c e s s a r i o uma ou o utro s e usa o r , mas
n e ss e caso apenas queremos s e ambas forem p o s s i t i v a s .
14 i f ( quantidade_materia > 0) and (quantidade_molecula > 0) :
15 #Sendo ambas maiores de z e ro vamos c r i a r um s e l e t o r a l e a t o r i o en tr e
molecula e materia
16 #Aqui e st amos usando uma da s fun ç õ e s do random , a fun ç ã o r andi n t , que
gera um número a l e a t ó r i o e n tr e o i n i c i a l e o f i n a l passados para fun ç ão
, n e ss e caso 0 e 1 , ale a to r iam e nte , sendo e l e para d e f i n i r qual das
l i s t a s v a i s e r usada a p r i m e i r a ou a se gunda
17 t i p o _ a l e a t o r i o = random . r an din t ( 0 , 1 )
18 #Aqui faz em os uma v e r i f i c a ç ã o s e o número g era do a l e a t o r i a m e n t e f o i 0
19 i f tipo_aleatorio == 0:
20 #Se o número f o i 0 , s i g n i f i c a que v a i usar a p r i m e i r a l i s t a , que
estamos usando para r e p r e s e n t a r materia , por i s s o vamos d e f i n i r o t i p o
como materia
21 s e l f . t i p o = "materia "
Capítulo 2. Desenvolvimento dos jogos 98
22 #Aqui v e r i f i c a m o s s e todas as o u tra s v e r i f i c a ç õ e s deram n eg ativ as ,
n e s s e c as o s e f o i 1
23 e l s e :
24 #Sendo 1 d e f i n i m o s o t i p o como m o le c ul a
25 s e l f . t i p o = "molecula"
26 #Aqui vamos p eg ar um d os nomes d entro da l i s t a a l e a t o r i a m e n t e usando
uma fun ç ão do random chamada c hoice , e a l i s t a que va i pegar va i s e r
a l e a t o r i a , usando o t i po que f o i c r ia d o ant erio rmen te
27 s e l f . nome = random . c h oi c e ( s e l f . p aren t ( ) . l i s t a [ t i p o _ a l e a t o r i o ] )
28 #Agora que pegamos o nome a leat o riam e nte , vamos remover e l e da l i s t a ,
para não t e r r e p e t i ç ão , na proxima vez que b u scar um nome , para i s s o
usamos a fun ç ão temove da l i s t a , passando o nome que f o i e s c o l h i d o
anteriormente
29 s e l f . p aren t ( ) . l i s t a [ t i p o _ a l e a t o r i o ] . remove ( s e l f . nome )
30
31 #Aqui v e r i f i c a m o s s e quan tida de_materia é maior que 0 , e s e a
quantidade_molecula é 0
32 elif ( quantidade_materia > 0) and (quantidade_molecula == 0) :
33 #Caso molecu l a e s t e j a v azia , e materia tenha nomes ainda , vamos
t r a b a l h a r apenas com a p r i me ir a l i s t a , que é a de m at eria . por i s s o
vamos u s ar o c h o i c e com a l i s t a [ 0 ]
34 s e l f . nome = random . c h o i c e ( s e l f . p a rent ( ) . l i s t a [ 0 ] )
35 #Vamos re mo ve r o nome da p r i m e i r a l i s t a
36 s e l f . parent ( ) . l i s t a [ 0 ] . remove ( s e l f . nome )
37 #Vamos s e t a r que o t i po vai s er m at er ia
38 s e l f . t i p o = "materia "
39
40 elif ( quantidade_materia == 0) and (quantidade_molecula > 0) :
41 #Caso materia e s t e j a va z ia , e molecula tenha nomes ainda , vamos
t r a b a l h a r apenas com a segunda l i s t a , que é a de m ole cula . p or i s s o
vamos u s ar o c h o i c e com a l i s t a [ 1 ]
42 s e l f . nome = random . c h o i c e ( s e l f . p a rent ( ) . l i s t a [ 1 ] )
43 #Vamos remover o nome da segunda l i s t a
44 s e l f . parent ( ) . l i s t a [ 1 ] . remove ( s e l f . nome )
45 #Vamos s e t a r que o t i po vai s er m olecula
46 s e l f . t i p o = "molecula"
47
48 #Criand o o s i n a l que f o i c r i a d o no e d i t o r de s i n a i s no QT Desi gn er , é
i mp orta n te t e r o mesmo nome , n e s s e c a so c l i c k .
49 c l i c k = S i g n a l ( )
50
51 #Mudando a f un ç ã o padr ã o do c l i c k do mouse , par a f a z e r a l g o e x t r a .
52 de f mousePressEvent ( s e l f , e v ent ) :
53 #Adicionando que apó s c l i c a r com o mouse e l e emita o s i n a l c l i c k .
54 s e l f . c l i c k . emit ( )
55
56 @Slot ( )
Capítulo 2. Desenvolvimento dos jogos 99
57 de f mudar_face ( s e l f ) :
58 #Aqui criamos o caminho para imagem , u t i l i z a n d o as v a r i á v e i s d e f i n i d a s
acima , para i s s o usamos de t e x t o + v a r i á v e l , n e s s e c as o usamos + pa ra
c o nc ate nar d o i s t e x t o s s epa r ad o s , ou c o n cat ena r t e x t o com v a r i á v e l ,
n e ss e cas o ":/ " + t i p o va i r e s u l t a r em " : / m ateria " e ao u t i l i z a r +"/"+nome
v ai co nc a tenar o r e s u l t a d o a n t e r i o r com " / agua " , r e s u l ta n do em " : /
materia / agua " , que é o caminho para a imagem de agua
59 caminho = ":/"+ s e l f . t i p o+"/"+s e l f . nome
60
61 #Vamos u sar o QPixmap , usando o caminho c r i a d o a n te r iormente , usando o
u a n te s do t e x t o p ar a d e f i n i r , que v a i s e r um t e x t o uni co de , pa ra
a c e i t a r acentua ç õ e s e o ut ros c a r a c t e r e s e s p e c i a i s sem problemas , usando
assim o u " " e concatenando o caminho com o u""+ caminho
62 pixmap = QPixmap( u""+caminho )
63 #Aqui chamamos a p r ó p r i a l a b e l com o s e l f e d e f i n i m o s uma nova imagem
usando o pixmap c r i a d o a n te r iormente , ao c on tr á r i o de ant es , nã o
prec i s a mos f a z e r v e r i f i c a ç ão , e vamos apenas mudar a f a c e
64 s e l f . setPixmap ( pixmap )
65
66 #Criamos o c u r s o r como normal
67 c u r s o r = QCursor ( Qt . ArrowCursor )
68 #Aqui chamamos a p r ó p r i a l a b e l com o s e l f e d e f i n i m o s o novo c u r s o r
criado
69 s e l f . s e tC ur so r ( c u r s o r )
70
71 #Aqui chamamos a pr ó p r ia l a b e l e bloqueamos s eus s i n a i s , para que não
s e p os sa mais c l i c a r enquanto e s t á com a f a c e para cima .
72 s e l f . b l o c k S i g n a l s ( True )
73
74 #Vamos v e r i f i c a r se j á e x i s t e uma p r im e ir a ca r t a no par e n t e da l a be l ,
por i s s o chamamos a l a b e l com s e l f usamos o ponto para i d e n t i f i c a r sua
l i g a ç ão , e chamamos s eu parent e e v e r i f i c a m o s se sua v a r i á v e l
tipo_primeira_carta está vazia
75 i f ( s e l f . p a rent ( ) . t i p o _primeira_ c a r t a == "" ) :
76 #Caso a v a r i á v e l e s t e j a v az i a , qu er d i z e r que nã o t e v e uma p r i m e i r a
c a rt a ainda , ent ão vamos a d i c i o n a r o s v a l o r e s de ssa l a b e l como p r im ei ra
carta
77 #Aqui e stamos passando o caminho da l a b e l para o p arente na v a r i á v e l
primeira_carta
78 s e l f . parent ( ) . p r i meira _ c arta = s e l f
79 #Aqui estamos mudando a v a r i a v e l tipo_prim ei ra_carta para agua
80 s e l f . parent ( ) . ti p o _ p rimeira_ca r t a = s e l f . nome
81 #Aqui s e v e r i f i c a s e o p r im e ir o i f d er f a l s o , ne ss e c a s o não e s t i v e r
v az i o , s e o t i p o da p r i m e i r a c a r t a é agua
82 elif ( s e l f . parent ( ) . ti p o _ p rimeira_ca r t a == s e l f . nome ) :
83 #Caso o t i p o s e j a agua , qu er d i z e r que a p r i m e i r a c a r t a e r a do t i p o
agua também, portanto fazendo um conjunto
Capítulo 2. Desenvolvimento dos jogos 100
84 #Aqui e stamos mudando o v a l o r da v a r i á v e l c onjunto do p a rente pa ra
v e rda de iro , achou uma combina ç ã o
85 s e l f . parent ( ) . conjunto = True
86 #Aqui e stamos mudando o v a l o r da v a r i á v e l conjunto_nome do p aren te
para agua
87 s e l f . parent ( ) . conjunto_nome = s e l f . nome
88 #Aqui e stamos aumentando o v a l o r da v a r i á v e l c on ta do r_ co nj unto do
p arent e em 1 , p o i s achou uma combina ç ã o
89 s e l f . parent ( ) . contador_conjunto += 1
90 #Aqui e st am os mudando o v a l o r da p r i m e i r a c a r t a novamente para v a zi a ,
p o i s achou um par , tem que a ch ar outro par
91 s e l f . parent ( ) . p r i meira _ c arta = ""
92 #Aqui e st am os mudando o v a l o r do t i p o da p r i m e i r a c a r t a novamente
pa ra vazia , p o i s achou um par , tem que a cha r outro par
93 s e l f . parent ( ) . tip o _ p r imeira_car t a = ""
94 #Aqui s e não pa ssa r em nenhumas das v e r i f i c a ç õ es , resumindo caso , não
e s t e j a vazio , nem s e j a uma combina ç ão , resumindo duas c a r t a s de t i p o s
diferentes
95 e l s e :
96 #Agora que as c a rt a s foram e s c o l h i d a s erradas , temos que v o l ta r a
f a c e para fundo , a pa rte de t r ás , que i n i c i a l m e n t e tinha , por ém temos
que d e i x a r por um tempo p ara poderem v er q ua l c a r t a e r á , e enqua nto se
espera , temos que i m p edir que c o n tinue virando ou t ra s c arta s , para i s s o
vamos b l oq u ear t odos os s i n a i s , a t é d e s v i r a r as c a r t a s .
97 #Aqui u t i l i z a m o s f o r que s i g n i f i c a para cada , n e ss e c aso para cada
l a b e l no par e n t e de s s e o b j e t o , s e l f . p a rent ( ) , ache seu s f i l h o s que sejam
l a b e l s , . f i n d C h i l d r e n ( QLabel ) , como é mais de um f i l h o temos que
u t i l i z a r o f or , par a t r a b a l h a r com cada l a b e l
98 f o r l a b e l i n s e l f . p arent ( ) . f i n d C h i l d r e n ( QLabel ) :
99 #Aqui v e r i f i c a m o s s e a l a b e l do p are nte e s t á com o c u r so r de
po n t eiro , que s i g n i f i c a que é a p art e de t r ás , e pode s e r c l i c a d o .
100 i f l a b e l . c u r s o r ( ) == QCursor ( Qt . Pointin gHandCur sor ) :
101 #Caso s e j a o c u r s o r de p o nte iro , b l o q u e i e s e u s s i n a i s .
102 l a b e l . b l o c k S i g n a l s ( True )
103
104 #Criamos um c i c l o ( loop ) para p a ss ar o tempo , d e f i n i n d o u t i l i z a n d o
QEventLoop ( )
105 lo op = QEventLoop ( )
106 #Tendo c r i ad o o l oop u t i l i z a m o s o QTimer para f a z e r um c i c l o ú nico ,
s i n g l e S h o t de 500 m ili segund os , e d e po is e n c e r r a r o l oop .
107 QTimer . s i n g l e S h o t ( 500 , loop . q u i t )
108 #Aqui e xec uta mos o loo p , pa ra p a s s a r 500 m i l i s e g u n d o s a n t e s de
co ntin uar a usar o a p l i c a t i v o
109 loo p . exec_ ( )
110
111 #Agora ap ó s o l o op de 500 m i l i se gu ndo s , vamos v i r a r a p r i m e i r a c a r t a
e a segunda c a r ta de v o l t a para t r á s , vamos c a r r e g a r a imagem de fundo
Capítulo 2. Desenvolvimento dos jogos 101
no pixmap
112 pixmap = QPixmap( u":/ imagens /fundo_carta " )
113 #Aqui d e f i n i m o s a p r ó p r i a l a b e l de v o l t a para o fu ndo
114 s e l f . setPixmap ( pixmap )
115 #Aqui d e f i n i m o s a l a b e l que e s t á armazenada no seu p a re n t e d e ntro do
p r i m e i r a c ar t a , de v o l t a para o f undo
116 s e l f . parent ( ) . p r i meira _ c arta . setPixmap ( pixmap )
117
118 #Aqui c ri amos um c u r s o r de p o n t e i r o
119 c u r s o r = QCursor ( Qt . Po inting HandCurs or )
120 #Aqui d e f i n i m os a pr ó p r i a l a b e l de v o l t a pa ra p o n t e i r o
121 s e l f . s e tC ur so r ( c u r s o r )
122 #Aqui d e f i n i m o s a l a b e l que e s t á armazenada no seu p a re n t e d e ntro do
p r i m e i r a c ar t a , de v o l t a para p o n t e i r o
123 s e l f . p arent ( ) . p r im ei r a _ca rta . s e tC ur so r ( c u r s o r )
124
125 #Aqui vamos f a z e r o mesmo f o r de a n tes s ó que n es s e caso para
de sblo quea r a a p l i c a ç ão
126 f o r l a b e l i n s e l f . p arent ( ) . f i n d C h i l d r e n ( QLabel ) :
127 i f l a b e l . c u r s o r ( ) == QCursor ( Qt . Pointin gHandCur sor ) :
128 #Caso s e j a o c u r s o r de p o nte iro , d e s b l o q u e i e s e u s s i n a i s .
129 l a b e l . b l o c k S i g n a l s ( F als e )
130
131 #Apó s t e r mudado todos de v o l ta ao normal , vamos v o l t a r as v ar i á v e i s
do p a r en t e da l a b e l p ar a v a z i o
132 s e l f . parent ( ) . p r i meira _ c arta = ""
133 #Def in im os a v a r i á v e l do p arente des sa l a b e l chamado
tipo_primeira_carta de volta para vazio
134 s e l f . parent ( ) . tip o _ p r imeira_car t a = ""
digo 23
Classe clicklabel arrumado com a utilização dos self e com uma única função
mudar_face
1#Aqui estamos c ria n do a widget escond ido , baseado em QWidget
2class e sco ndid o ( QWidget ) :
3#Criando a fun ç ão de i n i c i a l i z a ção , que se executa cada vez que o
programa c r i a uma nova widg et esc ondi do , e d e f i n i n d o quem é seu pa re nt e ,
n e s s e c as o é o u tro QWidget
4de f __init__ ( s e l f , parent=QWidget ) :
5#Gar an tindo que v a i f u nc io nar , e v a i a c i o n a r todas as v e z e s com o s u per
( )
6super ( ) . __init__ ( p aren t )
7#Aqui e stamos d e f i n i n d o que a w id ge t e sco ndido é para e s t a r es con dida ,
para i s s o usamos a fun ç ão setHidden passando o par âmetro True , para que
quando f o r c r i a d o a t e l a e s t e j a e sco ndi da
8s e l f . setHidden ( True )
9
Capítulo 2. Desenvolvimento dos jogos 102
10 #Essa fun ç ão mo d if i ca o e f e i t o de pintu r a , p o i s widgets promovidas não
ace ita m pl ano de fundo , por i s s o p r e c i s a s e mudar s ua fun ç ã o n ati v a , não
p re ci sa ndo mexer , tendo em vá r i o s l u g a r e s seu c ó d ig o pron to .
11 de f p aintE vent ( s e l f , pe ) :
12 o = QStyleOption ()
13 o . init From ( s e l f )
14 p = QPainter ( s e l f )
15 s e l f . s t y l e ( ) . drawPrimitive ( QStyle . PE_Widget , o , p , s e l f )
16
17 #Essa fun ç ã o v a i m o d i f i c a r o e f e i t o de escon der , que o c o r r e ao c l i c a r
no bot ã o c o n ti n uar , n e s s e c a so vamos ape nas mudar e l e para c as o t enha
completado todas as combina ç õ e s mostre um popup com parab é ns voc ê venceu
, e ao c on fir mar o popup f e c h e o j o go
18 de f hideEvent ( s e l f , even t ) :
19 #Aqui v e r i f i c a m o s s e a v a r i a v e l co ntado r_con junto do s eu pare nt e
novo_widget c he go u a 4 , r e pr es en ta nd o achou t odas as combina ç õ e s poss í
veis
20 i f ( s e l f . p a rent ( ) . contado r_conjunto == 4) :
21 #Caso t en ha achado , mo str a na t e l a do t e r m i n a l Parab é ns voc ê v enc eu
22 p r i n t (u" Parabéns você venceu" )
23 #Aqui criamos um popup de mensagem
24 msgBox = QMessageBox ( )
25 #Aqui d e f i n i m o s o t í t u l o do popup de mensagem
26 msgBox . setWi ndowTitle ( u"Parab éns" )
27 #Aqui d e f i n i m o s q ua l a mensagem do popup de mensagem
28 msgBox . s etText ( u"Parabéns você venceu " )
29 #Aqui d e f i n i m o s q ua l o bo t ão do popup de mensagem
30 msgBox . s et Stan dardB utton s ( QMessageBox . C lose )
31 #Aqui d e f i n i m o s q ua l o bo t ão do popup de mensagem é o pad r ão , p ara
c as o a p e r t e ESC, Ent er , Spa ce no t e c l a d o , a c i o n e o bot ã o
32 msgBox . se tDef ault Butt on ( QMessageBox . Close )
33 #Aqui v e r i f i c a m o s s e a mensagem f o i executada , no c aso acionad o algum
bot ão
34 r e t = msgBox . exec_ ( )
35 #Aqui v e r i f i c a m o s s e o bot ão a cion ado f o i Close
36 i f r e t == QMessageBox . Close :
37 #Caso t enha s i d o en ce rr am os o programa
38 sy s . e x i t ( )
39
40 #Aqui criamos o r e c e p t o r mudar_informativo para mudar q ual a imagem
basea do em q ual f o i a combina ç ã o
41 @Slot ( )
42 de f mudar_informativo ( s e l f ) :
43 #Aqui v e r i f i c a m o s s e a v a r i á v e l c onj unto do seu p arente novo_widget , é
True , no c a s o v e r dade i r o , é um conjunto
44 i f ( s e l f . p a rent ( ) . conjunto ) :
45 #Se f o r um co nju nt o , d e f i n i m o s o caminho p ara imagem , n e s s e c a so
Capítulo 2. Desenvolvimento dos jogos 103
sabemos que se u p r e f i x o v ai s e r in forma tivo , e s eu nome e s t á armazenado
no s eu pare nt e na v a r i á v e l conjunto_nome , por i s s o que é i mp or ta nte t e r
nomes i g u a i s
46 pixmap = QPixmap( u" :/ informativo /"+s e l f . parent ( ) . conjunto_nome )
47 #Aqui d e f i n i m o s a imagem p ara o s eu f i l h o l a b e l , n e s s e c a s o pas samo s
apenas Chi ld em vez de C hildren p o i s é a penas um f i l h o que queremos ,
usamos f i n d C h i l d ( QLabel ) , como nã o temos o utra l a b e l dent r o da wid ge t
escon d ido , não pre c i s a mos d e f i n i r seu nome , mas c a s o houvesse mais de
uma l a b e l , t e r í amos que p a s sa r d o i s par â metros , a l ém de seu t i p o QLabel ,
p a ss a r í amos seu nome , n e s s e ca so la be l_ 10 , f i c a n d o s e l f . f i n d C h i l d (
QLabel , " l abel_10 " )
48 s e l f . f i n d C h i l d ( QLabel ) . setPixmap ( pixmap )
49 #Aqui apó s t e r mudado o sua imagem de info r mati v o , vamos d e f i n i r que
não s e j a mais escondid a , resumindo apare ç a na t e l a
50 s e l f . setHidden ( F al s e )
51 #Aqui mudamos novamente o conjunto para Falso , p o is j á v e r i f i c o u ,
e ss e , pa ra e s p e r a r p e lo pr ó ximo c onjunto
52 s e l f . parent ( ) . conjunto = Fal s e
53 #Aqui mudamos novamente o nome do c on junto pa ra v azio , p o i s j á
v e r i f i c o u e s se , para e s p e r a r p e l o pr ó ximo c onjunto
54 s e l f . parent ( ) . conjunto_nome = ""
digo 24
Criação da classe escondido, definindo sua inicialização oculta e alteração da
função de colorir, conforme encontrado em (USER7797,2013), alteração da
função de esconder, e criação do receptor mudar_informativo
2.2.12 Arrumando últimos detalhes para criação do executável
Na Subsecção anterior foi convertido a interface do qt designer para python,
substituindo o anterior encontrado no aplicativo.py, fora também alterado a classe clicklabel
para a utilização de apenas o mudar_face, após foi realizado a criação da classe escondido,
terminando todas as instâncias de códigos, nessa subsecção vamos arrumar os imports
generalizados com a utilização do * qual foram criados na sub-subsecção 2.2.8.4, para
somente os utilizados na aplicação, tornando o programa mais leve e rápido, para isso vamos
remover os imports e executar o programa no geany utilizando o F5, para verificar o que está
faltando e comparar em qual biblioteca se encontra, observando qual o error apresentado
no terminal do python, conforme pode ser observado na figura 65, tendo observado qual foi
o erro encontrado, verificamos em qual biblioteca se encontra o item faltante, na figura 65
está faltando o Qwidget para isso verificamos os sites officiais das bibliotecas do pyside2
encontradas, em (QT,a;QT,b;QT,d), para saber de qual biblioteca o QWidget se
encontra, tendo encontrado fazemos o import correto do QWidgete executamos o digo
novamente para ver qual outro recurso está faltando importar, conforme pode ser observado
na figura 66, tendo observado qual o recurso faltante, novamente procura-se no site da
Capítulo 2. Desenvolvimento dos jogos 104
documentação, até conseguir executar o programa como um todo sem erros até vence-lo,
deixando os importes de recursos parecido com o código 25, tendo possível mudança na
sequencia das importações, porém não em sua quantidade ou recursos, completando as
importações especificas, o digo ficaras conforme o digo 26, ao executar ele vamos poder
jogar e fazer as combinações, tendo como exemplos algumas imagens do jogo funcionando
na figura 67 onde se encontra a tela ao ter acertado 3 combinações, faltando completar a
ultima, tendo em vista que as possições das cartas são aleatorio, portanto provavelmente
vai ser diferente, quando for executado, outro exemplo de selecionamente das combinações
de gás carbonico, abrindo a imagem de informativo, conforme a figura 68, e por fim a
figura 69 onde se encontra a mensagem de vitoria, parabenizando por vencer o jogo, ao
verificar tudo funcionando corretamente, vamos voltar no terminal para transformar o
aplicativo.py em um executavel sozinho sem necessidade de arquivos extras, para isso vamos
usar o PyInstaller que fora instalado e mencionado na secção 2.1, podendo verificar alguns
exemplos de utilização em vários sites como o (HELTONBIKER,2011), tendo incluindo
até mesmo na própria documentação do QT em (QT,o), tendo visto como funciona vamos
abrir o terminal e indo até o local da pasta, vamos executar o comando 27, esse comando
vai criar um executável, dentro da pasta dist, que vai ser criada ao executar esse comando,
sendo no o nome do executável definido em –name=”Meu_aplicativo”, o arquivo que vai
ser transformado em executável se encontra no final do comando aplicativo.py, –onefile
é onde define se queremos um arquivo sozinho, ou –onedir para definir que queremos
uma pasta com todos os arquivos junto do executável, –noconfirm usamos para não fazer
perguntas após executar o comando, e –hidden-import PySide2.QtXml é usado para
importar a biblioteca QtXml do PySide2 que o pyinstaller precisa, e ocasiona erros, por
não ser encontrado, tendo como referencia em (MSFRIESE,2018) para arrumar o erro,
adicionando o hidden-import no comando, não precisamos adicionar arquivos extras para as
imagens por utilizarmos o QResource System sendo ele o arquivo unico.qrc que convertemos
para recursos.py, para entender melhor pode ser observado em (FITZPATRICK,b), no
programa criado para o jogo, não definimos, icones ou outras coisas para o jogo, porém é
possivel crialos normalmente, tendo tutoriais na internet como no site (FITZPATRICK,
a), se for feito isso no windows vai ter criado um arquivo .exe que funciona em qualquer
computador que rode arquivos .exe, sem precisar instalar ou ter o Python no computador,
com isso terminamos de criar o jogo da memória, do começo ao fim passo a passo, na
próxima secção vamos criar o jogo de álgebra linear.
Capítulo 2. Desenvolvimento dos jogos 105
Figura 65
Visualização do erro de importação do QWidget após removido as linhas de
import
Figura 66
Visualização do erro de importação do QLabel após removido as linhas de
import e adicionado o import do QWidget
1#Importando os o b j e t o s do PySide2 u t i l i z a d o s no programa , simboliza tudo
em python , n e ss e caso vamos e s p e c i f i c a r qu a is nó s usamos
2from PySide2 . QtGui import QCursor , QPixmap , Qt , QPainter
3from PySide2 . QtWidgets import QMainWindow , QPushButton , QLabel , QWidget ,
QApplication , QStyleOption , QStyle , QMessageBox
Capítulo 2. Desenvolvimento dos jogos 106
4from PySide2 . QtCore import QRect , Signal , Slot , QCoreApplication ,
QMetaObject , QEventLoop , QTimer
digo 25 Alteração dos importes generalizados para apenas os necessários
1#Importando o sistem a , tempo e fun ç õ e s para a l e a t o r i e d a d e do python abaixo ,
e a l i n h a de cima d e f i n e o t i p o de c ó digo a s e r usado no python , o
hashtag (#) é u t i l i z a d o para d e f i n i r coment á r i o s .
2import sys , time , random
3
4#Importando as imagens do qrc , que foram c o n v e r t i d a s para o a rqui vo
r e c u r s o s . py .
5import r e c u r s o s
6
7#Importando os o b j e t o s do PySide2 u t i l i z a d o s no programa , simboliza tudo
em python , n e ss e caso vamos e s p e c i f i c a r qu a is nó s usamos
8from PySide2 . QtGui import QCursor , QPixmap , Qt , QPainter
9from PySide2 . QtWidgets import QMainWindow , QPushButton , QLabel , QWidget ,
QApplication , QStyleOption , QStyle , QMessageBox
10 from PySide2 . QtCore import QRect , Signal , Slot , QCoreApplication ,
QMetaObject , QEventLoop , QTimer
11
12 class Ui_MainWindow( object) :
13 de f s etupUi ( s e l f , MainWindow ) :
14 i f not MainWindow . objectName ( ) :
15 MainWindow . setObjectName ( u"MainWindow")
16 MainWindow . r e s i z e ( 5 61 , 546)
17 MainWindow . setAutoFillBackground ( F als e )
18 s e l f . c e n t r a l w i d g e t = novo_widget ( MainWindow )
19 s e l f . c e n t r a l w i d g e t . setObjectName ( u" centralwidget " )
20 s e l f . l abe l_ 2 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
21 s e l f . l a b e l _ 2 . setObjectName (u" label_2 " )
22 s e l f . l a b e l _ 2 . setGeometry (QRect (10 , 90 , 121 , 211) )
23 s e l f . l a b e l _2 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
24 s e l f . l a b e l _ 2 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
25 s e l f . l a b el_2 . s e t S c a l e d C o n t e n t s ( True )
26 s e l f . l abe l_ 3 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
27 s e l f . l a b e l _ 3 . setObjectName (u" label_3 " )
28 s e l f . l a b e l _ 3 . setGeometry (QRect (150 , 90 , 121 , 211) )
29 s e l f . l a b e l _3 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
30 s e l f . l a b e l _ 3 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
31 s e l f . l a b el_3 . s e t S c a l e d C o n t e n t s ( True )
32 s e l f . l abe l_ 5 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
33 s e l f . l a b e l _ 5 . setObjectName (u" label_5 " )
34 s e l f . l a b e l _ 5 . setGeometry (QRect (430 , 90 , 121 , 211) )
35 s e l f . l a b e l _5 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
36 s e l f . l a b e l _ 5 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
37 s e l f . l a b el_5 . s e t S c a l e d C o n t e n t s ( True )
Capítulo 2. Desenvolvimento dos jogos 107
38 s e l f . l abe l_ 6 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
39 s e l f . l a b e l _ 6 . setObjectName (u" label_6 " )
40 s e l f . l a b e l _ 6 . setGeometry (QRect (10 , 320 , 121 , 211) )
41 s e l f . l a b e l _6 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
42 s e l f . l a b e l _ 6 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
43 s e l f . l a b el_6 . s e t S c a l e d C o n t e n t s ( True )
44 s e l f . l abe l_ 7 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
45 s e l f . l a b e l _ 7 . setObjectName (u" label_7 " )
46 s e l f . l a b e l _ 7 . setGeometry (QRect (150 , 320 , 121 , 211) )
47 s e l f . l a b e l _7 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
48 s e l f . l a b e l _ 7 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
49 s e l f . l a b el_7 . s e t S c a l e d C o n t e n t s ( True )
50 s e l f . l abe l_ 8 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
51 s e l f . l a b e l _ 8 . setObjectName (u" label_8 " )
52 s e l f . l a b e l _ 8 . setGeometry (QRect (290 , 320 , 121 , 211) )
53 s e l f . l a b e l _8 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
54 s e l f . l a b e l _ 8 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
55 s e l f . l a b el_8 . s e t S c a l e d C o n t e n t s ( True )
56 s e l f . l abe l_ 9 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
57 s e l f . l a b e l _ 9 . setObjectName (u" label_9 " )
58 s e l f . l a b e l _ 9 . setGeometry (QRect (430 , 320 , 121 , 211) )
59 s e l f . l a b e l _9 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
60 s e l f . l a b e l _ 9 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
61 s e l f . l a b el_9 . s e t S c a l e d C o n t e n t s ( True )
62 s e l f . l abe l_ 4 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )
63 s e l f . l a b e l _ 4 . setObjectName (u" label_4 " )
64 s e l f . l a b e l _ 4 . setGeometry (QRect (290 , 90 , 121 , 211) )
65 s e l f . l a b e l _4 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )
66 s e l f . l a b e l _ 4 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )
67 s e l f . l a b el_4 . s e t S c a l e d C o n t e n t s ( True )
68 s e l f . l a b e l = QLabel ( s e l f . c e n t r a l w i d g e t )
69 s e l f . l a b e l . setObjectName ( u"label" )
70 s e l f . l a b e l . setGeometry ( QRect ( 10 , 10 , 541 , 6 1) )
71 s e l f . l a b e l . setTextFormat (Qt . AutoText )
72 s e l f . l a b e l . setWordWrap ( F a lse )
73 s e l f . l a b e l . s e t T e x t I n t e r a c t i o n F l a g s ( Qt . N oT ex tI nt er ac tio n )
74 s e l f . w id ge t = e scon dido ( s e l f . c e n t r a l w i d g e t )
75 s e l f . widget . setObjectName ( u" widget " )
76 s e l f . widget . s e t E nabled ( True )
77 s e l f . widget . setGeometry ( QRect (1 0 , 90 , 541 , 441) )
78 s e l f . widge t . s e t S t y l e S h e e t ( u" background -color : rgb(170 , 170 , 170) ;" )
79 s e l f . pushButton = QPushButton ( s e l f . widg et )
80 s e l f . pushButton . setObjectName ( u"pushButton")
81 s e l f . pushButton . setGeometry ( QRect ( 2 20 , 4 10 , 111 , 23) )
82 s e l f . pushButton . s e tCu r sor ( QCursor ( Qt . PointingHandCursor ) )
83 s e l f . pushButton . s e t S t y l e S h e e t ( u"background -color: rgb (240 , 240,
240);" )
Capítulo 2. Desenvolvimento dos jogos 108
84 s e l f . l a b el_10 = QLabel ( s e l f . widget )
85 s e l f . label_10 . setObjectName ( u" label_10" )
86 s e l f . label_10 . setGeometry ( QRect (0 , 0 , 541 , 401) )
87 s e l f . label_10 . setPixmap (QPixmap( u ":/ informativo / ferrugem " ) )
88 s e l f . l a b el _ 1 0 . s e t S c a l e d C o n t e n t s ( True )
89 MainWindow . s et Ce nt ralWidget ( s e l f . c e n t r a l w i d g e t )
90
91 #p art e impor tan te mencionada , como pode s e r observada ,
p ri meir a me nte f a z a c one x ão e n t r e mudar_face e d e p o i s muda r_i nfo rma tiv o
92 s e l f . r e t r a n s l a t e U i (MainWindow )
93 s e l f . la b e l _ 2 . c l i c k . connect ( s e l f . la b e l _ 2 . mudar_face )
94 s e l f . la b e l _ 3 . c l i c k . connect ( s e l f . la b e l _ 3 . mudar_face )
95 s e l f . la b e l _ 4 . c l i c k . connect ( s e l f . la b e l _ 4 . mudar_face )
96 s e l f . la b e l _ 5 . c l i c k . connect ( s e l f . la b e l _ 5 . mudar_face )
97 s e l f . la b e l _ 6 . c l i c k . connect ( s e l f . la b e l _ 6 . mudar_face )
98 s e l f . la b e l _ 7 . c l i c k . connect ( s e l f . la b e l _ 7 . mudar_face )
99 s e l f . la b e l _ 8 . c l i c k . connect ( s e l f . la b e l _ 8 . mudar_face )
100 s e l f . la b e l _ 9 . c l i c k . connect ( s e l f . la b e l _ 9 . mudar_face )
101 s e l f . la b e l _ 2 . c l i c k . connect ( s e l f . widget . mudar_informativo )
102 s e l f . la b e l _ 3 . c l i c k . connect ( s e l f . widget . mudar_informativo )
103 s e l f . la b e l _ 4 . c l i c k . connect ( s e l f . widget . mudar_informativo )
104 s e l f . la b e l _ 5 . c l i c k . connect ( s e l f . widget . mudar_informativo )
105 s e l f . la b e l _ 6 . c l i c k . connect ( s e l f . widget . mudar_informativo )
106 s e l f . la b e l _ 7 . c l i c k . connect ( s e l f . widget . mudar_informativo )
107 s e l f . la b e l _ 8 . c l i c k . connect ( s e l f . widget . mudar_informativo )
108 s e l f . la b e l _ 9 . c l i c k . connect ( s e l f . widget . mudar_informativo )
109 s e l f . pushButton . c l i c k e d . connect ( s e l f . widget . hide )
110
111
112
113 QMetaObject . connectSlotsByName ( MainWindow)
114 # setupUi
115
116 de f r e t r a n s l a t e U i ( s e l f , MainWindow ) :
117 MainWindow . setWindowTitle ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,
u"MainWindow" , None ) )
118 s e l f . l a b e l _ 2 . s e t T e x t ( "" )
119 s e l f . l a b e l _ 3 . s e t T e x t ( "" )
120 s e l f . l a b e l _ 5 . s e t T e x t ( "" )
121 s e l f . l a b e l _ 6 . s e t T e x t ( "" )
122 s e l f . l a b e l _ 7 . s e t T e x t ( "" )
123 s e l f . l a b e l _ 8 . s e t T e x t ( "" )
124 s e l f . l a b e l _ 9 . s e t T e x t ( "" )
125 s e l f . l a b e l _ 4 . s e t T e x t ( "" )
126 s e l f . l a b e l . s et Te x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<html
><head /><body ><p align =\" center\"><span style =\" font - size :12 pt; font -
weight :600;\" > Jogo da memoria : </ span > </p> <p align =\" center \"> <span style
Capítulo 2. Desenvolvimento dos jogos 109
=\" font -size :10 pt; font - weight :600;\" > Combine as cartas de estrutura
molecular com os materiais correspondentes </span ></p></body ></html >" ,
None ) )
127 s e l f . pushButton . s et Te xt ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"
Continuar" , None ) )
128 s e l f . l a b e l _ 1 0 . s e t T e x t ( "" )
129 # r e t r a n s l a t e U i
130
131 #Criando a nova c l a s s e novo_widget baseada no QWidget para armazenar as
v a r i á v e i s de compara ção , para s e r usado nas fun ç õ e s do c l i c k l a b e l .
132 class novo_widget ( QWidget ) :
133 #Criando a fun ç ão de i n i c i a l i z a ção , que se executa cada vez que o
programa c r i a uma nova widget u t i l i z a n d o o novo_widget , n ess e caso
apena s o c e n t r a l w i d g e t , e s eta n do quem é s eu p are nte , n e s s e c as o é o
MainWindow , por ém como não vamos u t i l i z á lo , estamos como nenhum , None
134 de f __init__ ( s e l f , parent=None ) :
135 #G ar antindo su a exe cu ç ã o
136 super ( ) . __init__ ( p aren t )
137 #Setand o uma v a r i á v e l na pr ó p r i a widget , por i s s o chamamos o s e l f e
usamos o ponto para d e f i n i r que f az part e dele , que vamos usar e s s a v ar i
á v e l para armazenar o l o c a l da p r im e ir a c arta , para poder t r a b a l h a r com
e l a cas o , o c onj u n to s e j a v e rd ad ei ro , tr av ando , e c a s o nã o s e j a ,
d e s v i r a r a c a rta , d e f i n i m o s s eu v a l o r i n i c i a l como um t e x t o v a z i o
138 self . primeira_carta = ""
139 #Setando uma v a ri á v e l na pró p r ia widget , como no a n t e r i o r usando o s e l f
e ponto , e s s a v a r i á v e l v ai armaze nar o t i p o da c ar t a , que v a i s e r o
nome usad o p ara f a z e r as compara ç õ e s , d e f i n i m o s s eu v a l o r i n i c i a l como
um texto vazio
140 self . tipo_primeira_carta = ""
141 #Setando uma v a ri á v e l na pró p r ia widget , como no a n t e r i o r usando o s e l f
e ponto , e s s a v a r i á v e l va i armazenar s e o c on junto das c a r t a s
s e l e c i o n a d a s e s t ão c o r r e t a s ou não , d ef in imo s seu va l or i n i c i a l como
falso
142 s e l f . conjunto = Fa l se
143 #Setando uma v a ri á v e l na pró p r ia widget , como no a n t e r i o r usando o s e l f
e ponto , e s s a v a r i á v e l va i armazenar o nome do c onjunto das c a r t a s
c o r r e t a s , d e f i n i m o s s eu v a l o r i n i c i a l como um t e x t o v a z i o
144 s e l f . conjunto_nome = ""
145 #Setando uma v a ri á v e l na pró p r ia widget , como no a n t e r i o r usando o s e l f
e ponto , e s s a v a r i á v e l v ai armazenar a q uan ti dad e de c o nj unt os c o r r e t o s
, n e s c e s s a r i o para sab e r s e venceram o j ogo da me r i a , d e fi n im o s seu
v a l o r i n i c i a l em z e ro
146 s e l f . contador_conjunto = 0
147 #Criand o uma v a r i á v el , com uma l i s t a , que p o s s u i duas l i s t a s den tro ,
para d e c l a r a r uma l i s t a u t i l i z a m o s c o l c h e t es , uma l i s t a v a zi a é d e f i n i d o
por [ ] , n es s e caso c riamos uma l i s t a , com duas l i s t a s dentro , [ [ ] , [ ] ] ,
para r e p r e s e n t a r que a p r im eir a l i s t a é de m at eri a e a segunda é
Capítulo 2. Desenvolvimento dos jogos 110
molecula , po d e ri a u t i l i z a r um d i c i o n á r i o para f a z e r i s s o , por ém s e r i a
mais complexo , por e s s e motivo f o i e s c o l h i d o us ar l i s t a s , d en tro das
l i s t a s , se e s c r e v e os nomes p e r te nc e nt e aos a p e l i d o s c r i a d o s no u nico .
qrc , sendo e l e s " agua " , " ferrugem " , " fumaca " , " s a l "
148 s e l f . l i s t a = [ [ "agua " ,"ferrugem " ," fumaca " ,"sal" ] , [ "agua " ,"ferrugem" ,"
fumaca" ,"sal" ] ]
149
150 #Criando a c l i c k l a b e l que s e baseado na QLabel , que f o i c r i a d o no QT Design
151 class c l i c k l a b e l ( QLabel ) :
152 #Criando a fun ç ão de i n i c i a l i z a ção , que se executa cada vez que o
programa c r i a uma nova l a b e l u t i l i z a n d o o c l i c k l a b e l , e setando quem é
seu pa ren te , n e s s e c aso QWidget
153 de f __init__ ( s e l f , parent=QWidget ) :
154 #Gar an tindo que v a i f u nc io nar , e v a i a c i o n a r todas as v e z e s com o s u per
( )
155 super ( ) . __init__ ( p aren t )
156
157 #Aqui e st am os vendo a q u an tid a de de nomes d entro da p r i m e i r a l i s t a ,
se ndo q uan tida de de m at er ia , usando l e n ( ) , que con ta q ua n tidades de
i t e n s dentro de o b j et o s no python , ent ã o v e r i f i c a m o s a p o s i ç ão 0 da
l i s t a , l i s t a [ 0 ] , consi d e rando que l i s t a e s t á em seu parente , por i s s o
s e l f . p a rent ( ) . l i s t a [ 0 ] , em linguagem de programa ção é normal come ç ar as
c ontag en s em 0 , p or i s s o a p r i m e i r a p o s i ç ão de uma l i s t a é 0 em vez de 1
158 quantidade_materia = l e n ( s e l f . p a rent ( ) . l i s t a [ 0 ] )
159 #Aqui estamos vendo a quanti dade de nomes dentro da segunda l i s t a ,
sendo quantidade de m o lecula
160 quantidade_molecula = l e n ( s e l f . p a r e nt ( ) . l i s t a [ 1 ] )
161
162 #Aqui v e r i f i c a m o s s e a qua nt id ad e de mater ia e mole cula s ão m ai or es que
0 , resumindo s e as l i s t a s não e s t ão v a zia s , p ode r ia s e r usado uma
s i m p l e s compara ç ã o com [ ] , po r ém para f i c a r mai s f á c i l o e ntendimento ,
u t i l i z a m o s a quant idade , para i s s o comparamos a v a r i á v e l de materia , e
usamos um s i n a l i z a d o r and que s i g n i f i c a e , e comparamos a v a r i á v e l
de molecula , o and s i g n i f i c a que s ó e x e c u t a s e ambas as compara ç õ es
deram p o s s i t i v o , caso s e j a n e c e s s a r i o uma ou o utro s e usa o r , mas
n e ss e caso apenas queremos s e ambas forem p o s s i t i v a s .
163 i f ( quantidade_materia > 0) and (quantidade_molecula > 0) :
164 #Sendo ambas maiores de z e ro vamos c r i a r um s e l e t o r a l e a t o r i o en tr e
molecula e materia
165 #Aqui e st amos usando uma da s fun ç õ e s do random , a fun ç ã o r andi n t , que
gera um número a l e a t ó r i o e n tr e o i n i c i a l e o f i n a l passados para fun ç ão
, n e ss e caso 0 e 1 , ale a to r iam e nte , sendo e l e para d e f i n i r qual das
l i s t a s v a i s e r usada a p r i m e i r a ou a se gunda
166 t i p o _ a l e a t o r i o = random . r an din t ( 0 , 1 )
167 #Aqui faz em os uma v e r i f i c a ç ã o s e o número g era do a l e a t o r i a m e n t e f o i 0
168 i f tipo_aleatorio == 0:
169 #Se o número f o i 0 , s i g n i f i c a que v a i usar a p r i m e i r a l i s t a , que
Capítulo 2. Desenvolvimento dos jogos 111
estamos usando para r e p r e s e n t a r materia , por i s s o vamos d e f i n i r o t i p o
como materia
170 s e l f . t i p o = "materia "
171 #Aqui v e r i f i c a m o s s e todas as o u tra s v e r i f i c a ç õ e s deram n eg ativ as ,
n e s s e c as o s e f o i 1
172 e l s e :
173 #Sendo 1 d e f i n i m o s o t i p o como m o le c ul a
174 s e l f . t i p o = "molecula"
175 #Aqui vamos p eg ar um d os nomes d entro da l i s t a a l e a t o r i a m e n t e usando
uma fun ç ão do random chamada c hoice , e a l i s t a que va i pegar va i s e r
a l e a t o r i a , usando o t i po que f o i c r ia d o ant erio rmen te
176 s e l f . nome = random . c h oi c e ( s e l f . p aren t ( ) . l i s t a [ t i p o _ a l e a t o r i o ] )
177 #Agora que pegamos o nome a leat o riam e nte , vamos remover e l e da l i s t a ,
para não t e r r e p e t i ç ão , na proxima vez que b u scar um nome , para i s s o
usamos a fun ç ão temove da l i s t a , passando o nome que f o i e s c o l h i d o
anteriormente
178 s e l f . p aren t ( ) . l i s t a [ t i p o _ a l e a t o r i o ] . remove ( s e l f . nome )
179
180 #Aqui v e r i f i c a m o s s e quan tida de_materia é maior que 0 , e s e a
quantidade_molecula é 0
181 elif ( quantidade_materia > 0) and (quantidade_molecula == 0) :
182 #Caso molecu l a e s t e j a v azia , e materia tenha nomes ainda , vamos
t r a b a l h a r apenas com a p r i me ir a l i s t a , que é a de m at eria . por i s s o
vamos u s ar o c h o i c e com a l i s t a [ 0 ]
183 s e l f . nome = random . c h o i c e ( s e l f . p a rent ( ) . l i s t a [ 0 ] )
184 #Vamos re mo ve r o nome da p r i m e i r a l i s t a
185 s e l f . parent ( ) . l i s t a [ 0 ] . remove ( s e l f . nome )
186 #Vamos s e t a r que o t i po vai s er m at er ia
187 s e l f . t i p o = "materia "
188
189 elif ( quantidade_materia == 0) and (quantidade_molecula > 0) :
190 #Caso materia e s t e j a va z ia , e molecula tenha nomes ainda , vamos
t r a b a l h a r apenas com a segunda l i s t a , que é a de m ole cula . p or i s s o
vamos u s ar o c h o i c e com a l i s t a [ 1 ]
191 s e l f . nome = random . c h o i c e ( s e l f . p a rent ( ) . l i s t a [ 1 ] )
192 #Vamos remover o nome da segunda l i s t a
193 s e l f . parent ( ) . l i s t a [ 1 ] . remove ( s e l f . nome )
194 #Vamos s e t a r que o t i po vai s er m olecula
195 s e l f . t i p o = "molecula"
196
197 #Criand o o s i n a l que f o i c r i a d o no e d i t o r de s i n a i s no QT Desi gn er , é
i mp orta n te t e r o mesmo nome , n e s s e c a so c l i c k .
198 c l i c k = S i g n a l ( )
199
200 #Mudando a f un ç ã o padr ã o do c l i c k do mouse , par a f a z e r a l g o e x t r a .
201 de f mousePressEvent ( s e l f , e v ent ) :
202 #Adicionando que apó s c l i c a r com o mouse e l e emita o s i n a l c l i c k .
Capítulo 2. Desenvolvimento dos jogos 112
203 s e l f . c l i c k . emit ( )
204
205 @Slot ( )
206 de f mudar_face ( s e l f ) :
207 #Aqui criamos o caminho para imagem , u t i l i z a n d o as v a r i á v e i s d e f i n i d a s
acima , para i s s o usamos de t e x t o + v a r i á v e l , n e s s e c as o usamos + pa ra
c o nc ate nar d o i s t e x t o s s epa r ad o s , ou c o n cat ena r t e x t o com v a r i á v e l ,
n e ss e cas o ":/ " + t i p o va i r e s u l t a r em " : / m ateria " e ao u t i l i z a r +"/"+nome
v ai co nc a tenar o r e s u l t a d o a n t e r i o r com " / agua " , r e s u l ta n do em " : /
materia / agua " , que é o caminho para a imagem de agua
208 caminho = ":/"+ s e l f . t i p o+"/"+s e l f . nome
209
210 #Vamos u sar o QPixmap , usando o caminho c r i a d o a n te r iormente , usando o
u a n te s do t e x t o p ar a d e f i n i r , que v a i s e r um t e x t o uni co de , pa ra
a c e i t a r acentua ç õ e s e o ut ros c a r a c t e r e s e s p e c i a i s sem problemas , usando
assim o u " " e concatenando o caminho com o u""+ caminho
211 pixmap = QPixmap( u""+caminho )
212 #Aqui chamamos a p r ó p r i a l a b e l com o s e l f e d e f i n i m o s uma nova imagem
usando o pixmap c r i a d o a n te r iormente , ao c on tr á r i o de ant es , nã o
prec i s a mos f a z e r v e r i f i c a ç ão , e vamos apenas mudar a f a c e
213 s e l f . setPixmap ( pixmap )
214
215 #Criamos o c u r s o r como normal
216 c u r s o r = QCursor ( Qt . ArrowCursor )
217 #Aqui chamamos a p r ó p r i a l a b e l com o s e l f e d e f i n i m o s o novo c u r s o r
criado
218 s e l f . s e tC ur so r ( c u r s o r )
219
220 #Aqui chamamos a pr ó p r ia l a b e l e bloqueamos s eus s i n a i s , para que não
s e p os sa mais c l i c a r enquanto e s t á com a f a c e para cima .
221 s e l f . b l o c k S i g n a l s ( True )
222
223 #Vamos v e r i f i c a r se j á e x i s t e uma p r im e ir a ca r t a no par e n t e da l a be l ,
por i s s o chamamos a l a b e l com s e l f usamos o ponto para i d e n t i f i c a r sua
l i g a ç ão , e chamamos s eu parent e e v e r i f i c a m o s se sua v a r i á v e l
tipo_primeira_carta está vazia
224 i f ( s e l f . p a rent ( ) . t i p o _primeira_ c a r t a == "" ) :
225 #Caso a v a r i á v e l e s t e j a v az i a , qu er d i z e r que nã o t e v e uma p r i m e i r a
c a rt a ainda , ent ão vamos a d i c i o n a r o s v a l o r e s de ssa l a b e l como p r im ei ra
carta
226 #Aqui e stamos passando o caminho da l a b e l para o p arente na v a r i á v e l
primeira_carta
227 s e l f . parent ( ) . p r i meira _ c arta = s e l f
228 #Aqui estamos mudando a v a r i a v e l tipo_prim ei ra_carta para agua
229 s e l f . parent ( ) . ti p o _ p rimeira_ca r t a = s e l f . nome
230 #Aqui s e v e r i f i c a s e o p r im e ir o i f d er f a l s o , ne ss e c a s o não e s t i v e r
v az i o , s e o t i p o da p r i m e i r a c a r t a é agua
Capítulo 2. Desenvolvimento dos jogos 113
231 elif ( s e l f . parent ( ) . ti p o _ p rimeira_ca r t a == s e l f . nome ) :
232 #Caso o t i p o s e j a agua , qu er d i z e r que a p r i m e i r a c a r t a e r a do t i p o
agua também, portanto fazendo um conjunto
233 #Aqui e stamos mudando o v a l o r da v a r i á v e l c onjunto do p a rente pa ra
v e rda de iro , achou uma combina ç ã o
234 s e l f . parent ( ) . conjunto = True
235 #Aqui e stamos mudando o v a l o r da v a r i á v e l conjunto_nome do p aren te
para agua
236 s e l f . parent ( ) . conjunto_nome = s e l f . nome
237 #Aqui e stamos aumentando o v a l o r da v a r i á v e l c on ta do r_ co nj unto do
p arent e em 1 , p o i s achou uma combina ç ã o
238 s e l f . parent ( ) . contador_conjunto += 1
239 #Aqui e st am os mudando o v a l o r da p r i m e i r a c a r t a novamente para v a zi a ,
p o i s achou um par , tem que a ch ar outro par
240 s e l f . parent ( ) . p r i meira _ c arta = ""
241 #Aqui e st am os mudando o v a l o r do t i p o da p r i m e i r a c a r t a novamente
pa ra vazia , p o i s achou um par , tem que a cha r outro par
242 s e l f . parent ( ) . tip o _ p r imeira_car t a = ""
243 #Aqui s e não pa ssa r em nenhumas das v e r i f i c a ç õ es , resumindo caso , não
e s t e j a vazio , nem s e j a uma combina ç ão , resumindo duas c a r t a s de t i p o s
diferentes
244 e l s e :
245 #Agora que as c a rt a s foram e s c o l h i d a s erradas , temos que v o l ta r a
f a c e para fundo , a pa rte de t r ás , que i n i c i a l m e n t e tinha , por ém temos
que d e i x a r por um tempo p ara poderem v er q ua l c a r t a e r á , e enqua nto se
espera , temos que i m p edir que c o n tinue virando ou t ra s c arta s , para i s s o
vamos b l oq u ear t odos os s i n a i s , a t é d e s v i r a r as c a r t a s .
246 #Aqui u t i l i z a m o s f o r que s i g n i f i c a para cada , n e ss e c aso para cada
l a b e l no par e n t e de s s e o b j e t o , s e l f . p a rent ( ) , ache seu s f i l h o s que sejam
l a b e l s , . f i n d C h i l d r e n ( QLabel ) , como é mais de um f i l h o temos que
u t i l i z a r o f or , par a t r a b a l h a r com cada l a b e l
247 f o r l a b e l i n s e l f . p arent ( ) . f i n d C h i l d r e n ( QLabel ) :
248 #Aqui v e r i f i c a m o s s e a l a b e l do p are nte e s t á com o c u r so r de
po n t eiro , que s i g n i f i c a que é a p art e de t r ás , e pode s e r c l i c a d o .
249 i f l a b e l . c u r s o r ( ) == QCursor ( Qt . Pointin gHandCur sor ) :
250 #Caso s e j a o c u r s o r de p o nte iro , b l o q u e i e s e u s s i n a i s .
251 l a b e l . b l o c k S i g n a l s ( True )
252
253 #Criamos um c i c l o ( loop ) para p a ss ar o tempo , d e f i n i n d o u t i l i z a n d o
QEventLoop ( )
254 lo op = QEventLoop ( )
255 #Tendo c r i ad o o l oop u t i l i z a m o s o QTimer para f a z e r um c i c l o ú nico ,
s i n g l e S h o t de 500 m ili segund os , e d e po is e n c e r r a r o l oop .
256 QTimer . s i n g l e S h o t ( 500 , loop . q u i t )
257 #Aqui e xec uta mos o loo p , pa ra p a s s a r 500 m i l i s e g u n d o s a n t e s de
co ntin uar a usar o a p l i c a t i v o
258 loo p . exec_ ( )
Capítulo 2. Desenvolvimento dos jogos 114
259
260 #Agora ap ó s o l o op de 500 m i l i se gu ndo s , vamos v i r a r a p r i m e i r a c a r t a
e a segunda c a r ta de v o l t a para t r á s , vamos c a r r e g a r a imagem de fundo
no pixmap
261 pixmap = QPixmap( u":/ imagens /fundo_carta " )
262 #Aqui d e f i n i m o s a p r ó p r i a l a b e l de v o l t a para o fu ndo
263 s e l f . setPixmap ( pixmap )
264 #Aqui d e f i n i m o s a l a b e l que e s t á armazenada no seu p a re n t e d e ntro do
p r i m e i r a c ar t a , de v o l t a para o f undo
265 s e l f . parent ( ) . p r i meira _ c arta . setPixmap ( pixmap )
266
267 #Aqui c ri amos um c u r s o r de p o n t e i r o
268 c u r s o r = QCursor ( Qt . Po inting HandCurs or )
269 #Aqui d e f i n i m os a pr ó p r i a l a b e l de v o l t a pa ra p o n t e i r o
270 s e l f . s e tC ur so r ( c u r s o r )
271 #Aqui d e f i n i m o s a l a b e l que e s t á armazenada no seu p a re n t e d e ntro do
p r i m e i r a c ar t a , de v o l t a para p o n t e i r o
272 s e l f . p arent ( ) . p r im ei r a _ca rta . s e tC ur so r ( c u r s o r )
273
274 #Aqui vamos f a z e r o mesmo f o r de a n tes s ó que n es s e caso para
de sblo quea r a a p l i c a ç ão
275 f o r l a b e l i n s e l f . p arent ( ) . f i n d C h i l d r e n ( QLabel ) :
276 i f l a b e l . c u r s o r ( ) == QCursor ( Qt . Pointin gHandCur sor ) :
277 #Caso s e j a o c u r s o r de p o nte iro , d e s b l o q u e i e s e u s s i n a i s .
278 l a b e l . b l o c k S i g n a l s ( F als e )
279
280 #Apó s t e r mudado todos de v o l ta ao normal , vamos v o l t a r as v ar i á v e i s
do p a r en t e da l a b e l p ar a v a z i o
281 s e l f . parent ( ) . p r i meira _ c arta = ""
282 #Def in im os a v a r i á v e l do p arente des sa l a b e l chamado
tipo_primeira_carta de volta para vazio
283 s e l f . parent ( ) . tip o _ p r imeira_car t a = ""
284
285 #Aqui estamos c ria n do a widget escond ido , baseado em QWidget
286 class e sco ndid o ( QWidget ) :
287 #Criando a fun ç ão de i n i c i a l i z a ção , que se executa cada vez que o
programa c r i a uma nova widg et esc ondi do , e d e f i n i n d o quem é seu pa re nt e ,
n e s s e c as o é o u tro QWidget
288 de f __init__ ( s e l f , parent=QWidget ) :
289 #Gar an tindo que v a i f u nc io nar , e v a i a c i o n a r todas as v e z e s com o s u per
( )
290 super ( ) . __init__ ( p aren t )
291 #Aqui e stamos d e f i n i n d o que a w id ge t e sco ndido é para e s t a r es con dida ,
para i s s o usamos a fun ç ão setHidden passando o par âmetro True , para que
quando f o r c r i a d o a t e l a e s t e j a e sco ndi da
292 s e l f . setHidden ( True )
293
Capítulo 2. Desenvolvimento dos jogos 115
294 #Essa fun ç ão mo d if i ca o e f e i t o de pintu r a , p o i s widgets promovidas não
ace ita m pl ano de fundo , por i s s o p r e c i s a s e mudar s ua fun ç ã o n ati v a , não
p re ci sa ndo mexer , tendo em vá r i o s l u g a r e s seu c ó d ig o pron to .
295 de f p aintE vent ( s e l f , pe ) :
296 o = QStyleOption ()
297 o . init From ( s e l f )
298 p = QPainter ( s e l f )
299 s e l f . s t y l e ( ) . drawPrimitive ( QStyle . PE_Widget , o , p , s e l f )
300
301 #Essa fun ç ã o v a i m o d i f i c a r o e f e i t o de escon der , que o c o r r e ao c l i c a r
no bot ã o c o n ti n uar , n e s s e c a so vamos ape nas mudar e l e para c as o t enha
completado todas as combina ç õ e s mostre um popup com parab é ns voc ê venceu
, e ao c on fir mar o popup f e c h e o j o go
302 de f hideEvent ( s e l f , even t ) :
303 #Aqui v e r i f i c a m o s s e a v a r i a v e l co ntado r_con junto do s eu pare nt e
novo_widget c he go u a 4 , r e pr es en ta nd o achou t odas as combina ç õ e s poss í
veis
304 i f ( s e l f . p a rent ( ) . contado r_conjunto == 4) :
305 #Caso t en ha achado , mo str a na t e l a do t e r m i n a l Parab é ns voc ê v enc eu
306 p r i n t (u" Parabéns você venceu" )
307 #Aqui criamos um popup de mensagem
308 msgBox = QMessageBox ( )
309 #Aqui d e f i n i m o s o t í t u l o do popup de mensagem
310 msgBox . setWi ndowTitle ( u"Parab éns" )
311 #Aqui d e f i n i m o s q ua l a mensagem do popup de mensagem
312 msgBox . s etText ( u"Parabéns você venceu " )
313 #Aqui d e f i n i m o s q ua l o bo t ão do popup de mensagem
314 msgBox . s et Stan dardB utton s ( QMessageBox . C lose )
315 #Aqui d e f i n i m o s q ua l o bo t ão do popup de mensagem é o pad r ão , p ara
c as o a p e r t e ESC, Ent er , Spa ce no t e c l a d o , a c i o n e o bot ã o
316 msgBox . se tDef ault Butt on ( QMessageBox . Close )
317 #Aqui v e r i f i c a m o s s e a mensagem f o i executada , no c aso acionad o algum
bot ão
318 r e t = msgBox . exec_ ( )
319 #Aqui v e r i f i c a m o s s e o bot ão a cion ado f o i Close
320 i f r e t == QMessageBox . Close :
321 #Caso t enha s i d o en ce rr am os o programa
322 sy s . e x i t ( )
323
324 #Aqui criamos o r e c e p t o r mudar_informativo para mudar q ual a imagem
basea do em q ual f o i a combina ç ã o
325 @Slot ( )
326 de f mudar_informativo ( s e l f ) :
327 #Aqui v e r i f i c a m o s s e a v a r i á v e l c onj unto do seu p arente novo_widget , é
True , no c a s o v e r dade i r o , é um conjunto
328 i f ( s e l f . p a rent ( ) . conjunto ) :
329 #Se f o r um co nju nt o , d e f i n i m o s o caminho p ara imagem , n e s s e c a so
Capítulo 2. Desenvolvimento dos jogos 116
sabemos que se u p r e f i x o v ai s e r in forma tivo , e s eu nome e s t á armazenado
no s eu pare nt e na v a r i á v e l conjunto_nome , por i s s o que é i mp or ta nte t e r
nomes i g u a i s
330 pixmap = QPixmap( u" :/ informativo /"+s e l f . parent ( ) . conjunto_nome )
331 #Aqui d e f i n i m o s a imagem p ara o s eu f i l h o l a b e l , n e s s e c a s o pas samo s
apenas Chi ld em vez de C hildren p o i s é a penas um f i l h o que queremos ,
usamos f i n d C h i l d ( QLabel ) , como nã o temos o utra l a b e l dent r o da wid ge t
escon d ido , não pre c i s a mos d e f i n i r seu nome , mas c a s o houvesse mais de
uma l a b e l , t e r í amos que p a s sa r d o i s par â metros , a l ém de seu t i p o QLabel ,
p a ss a r í amos seu nome , n e s s e ca so la be l_ 10 , f i c a n d o s e l f . f i n d C h i l d (
QLabel , " l abel_10 " )
332 s e l f . f i n d C h i l d ( QLabel ) . setPixmap ( pixmap )
333 #Aqui apó s t e r mudado o sua imagem de info r mati v o , vamos d e f i n i r que
não s e j a mais escondid a , resumindo apare ç a na t e l a
334 s e l f . setHidden ( F al s e )
335 #Aqui mudamos novamente o conjunto para Falso , p o is j á v e r i f i c o u ,
e ss e , pa ra e s p e r a r p e lo pr ó ximo c onjunto
336 s e l f . parent ( ) . conjunto = Fal s e
337 #Aqui mudamos novamente o nome do c on junto pa ra v azio , p o i s j á
v e r i f i c o u e s se , para e s p e r a r p e l o pr ó ximo c onjunto
338 s e l f . parent ( ) . conjunto_nome = ""
339
340 #Tendo c r i ad o tudo , vamos c r i a r a j a n e l a p r i n c i p a l , u t i l i z a n d o a i n t e r f a c e
c r i a d a no QT D esigne r
341 class MainWindow(QMainWindow , Ui_MainWindow) :
342 #Funç ão de i n i c i a l i z a ç ão
343 de f __init__ ( s e l f ) :
344 #G ar antindo su a exe cu ç ã o
345 super(MainWindow , s e l f ) . __init__ ( )
346 #Adicionando a i n t e r f a c e
347 s e l f . setup Ui ( s e l f )
348 #Mostrando a i n t e r f a c e
349 s e l f . show ( )
350
351 #Começ o da a p l i c a ç ão , d e f i n i n d o seu i n í c i o p r i n c i p a l
352 i f __name__ == __main__ :
353 #Defi n e a c r i a ç ão do a p l i c a t i v o
354 app = QApplicat ion ( sys . argv )
355 #Adicionando a j a n e l a p r i n c i p a l para o a p l i c a t i v o
356 mainWin = MainWindow ( )
357 #Executando o a p l i c a t i v o
358 r e t = app . exec_ ( )
359 #Terminando o programa
360 sy s . e x i t ( )
digo 26 Código completo do jogo da memoria
Capítulo 2. Desenvolvimento dos jogos 117
Figura 67 Interface do jogo da memoria funcionando após três combinações corretas
Capítulo 2. Desenvolvimento dos jogos 118
Figura 68 Interface do jogo da memoria após combinar as cartas de CO2
Capítulo 2. Desenvolvimento dos jogos 119
Figura 69 Interface do jogo da memoria após vencer o jogo
1pyinstaller hiddenimport PySide2 . QtXml noconfirm onefile name="
Meu_aplicativo" aplicativo .py
digo 27
Comando utilizado para converter o arquivo aplicativo.py em um executável
individual
2.3 Desenvolvimento do jogo de álgebra linear
Na secção anterior aprendemos a usar o QT Designer para criar um jogo de memoria,
desde da criação da interface até a criação do executável, com esse conhecimento vamos
criar um jogo de álgebra linear de três variáveis nessa secção, para mais informações sobre
álgebra linear de três variáveis pode ser observado em (DAWKINS, ), com imagens no
lugar das variáveis x,y e z, com um input de texto para escrever qual o valor das imagens,
que ao acertar vai carregar um vídeo, para isso vamos criar uma nova pasta para começar,
nesse caso escolhemos o nome xyz e criamos dentro de documentos, no windows, agora
vamos fazer tudo novamente, pulando as etapas separadas e criando o .ui no QT Design
Capítulo 2. Desenvolvimento dos jogos 120
de uma única vez, para isso vamos começar pegando às imagens que vão ser usadas, para
abelha, flor, mel e um botão de play, juntamente com o vídeo sobre produção de mel,
porém videos não podem ser adicionados ao qrc, apenas às imagens, para adicionar o vídeo,
é necessário mudar algumas coisas no aplicativo e no pyinstaller, que serás verificado mais
para frente, por enquanto vamos achar as imagens e o vídeo, e adicionar às imagens ao
.qrc no QT Designer
2.3.1 Vídeo e imagens a serem utilizadas no jogo de álgebra linear
Nessa subsecção vamos definir quais serão as imagens a serem utilizadas no desen-
volvimento do jogo de álgebra linear, juntamente com a seleção do vídeo a ser usado, para
a variável X vamos usar uma imagem de abelha, figura 70, a variável Y vamos substituir
por uma flor, figura 71, por fim a variável Z vamos trocar por uma imagem de um pote
de mel, figura 72, tendo selecionado as imagens a serem utilizadas no lugar das variáveis,
vamos pegar uma imagem de play para colocar sobre a tela do vídeo, preferencialmente
uma imagem transparente e branca como a qual fora selecionado, figura 73, com todas as
imagens selecionadas, vamos pegar um vídeo de como é feito o mel, como base de qual fora
escolhido podemos ver uma imagem de sua abertura com o nome do vídeo e seu criador,
figura 74.
Figura 70
Imagem de abelha escolhida para substituir a variável X da equação de algebra
linear, produzida por (VECTEEZY,a)
Capítulo 2. Desenvolvimento dos jogos 121
Figura 71
Imagem de abelha escolhida para substituir a variável Y da equação de algebra
linear, produzida por (VECTEEZY,b)
Figura 72
Imagem de abelha escolhida para substituir a variável Z da equação de algebra
linear, produzida por (STOCKIO, )
Figura 73
Imagem de play escolhida para adicionar a tela do vídeo, produzida por (JOHN,
2019)
Capítulo 2. Desenvolvimento dos jogos 122
Figura 74
Imagem de abertura do vídeo, produzida por (Geoffrey Kater; Agro Bayer
Brasil,2018)
2.3.2 Criando o repositório recursos.qrc
Na subsecção anterior fora selecionado quais os materiais a serem utilizados no
aplicativo, tendo o vídeo a ser conseguido com o criador do vídeo (Geoffrey Kater; Agro
Bayer Brasil,2018) e depois de ter conseguido o vídeo é recomendado usar um conversor
para mudar o formato para .avi, o conversor usado nesse projeto foi (123 APPS, ), nessa
subsecção vamos criar o repositório das imagens a serem utilizadas, conforme fora feito ao
desenvolver o jogo da memoria na subsecção 2.2.4, tendo as imagens em .png e o vídeo em
.avi criamos uma pasta dentro de xyz, chamada imagens para armazenar as imagens e
outra pasta chamada video para armazenar o vídeo, agora vamos no QT Designer criar o
arquivo .qrc, que vamos chamar de recursos.qrc, e adicionar um prefixo chamado imagens,
ao adicionar os arquivos de imagens podemos selecionar todos de uma vez, depois mudar
o apelido de cada um deles, nesse caso vamos apelidamos respectivamente de abelha, flor,
mel e play, o vídeo não serás adicionado ao .qrc, pois não é suportado, ao completar de
criar o repositorio, deve ficar conforme a figura 75.
Capítulo 2. Desenvolvimento dos jogos 123
Figura 75 Editor de recursos preenchido corretamente
2.3.3
Criação da label de informativo do jogo, e definindo a equação mate-
mática a ser utilizada
Na subsecção anterior criamos as pastas onde as imagens e o vídeo serão armazena-
dos, juntamente com a criação do repositorio recursos.qrc, nessa subsecção vamos começar
o desenvolvimento criando uma label, como fora feito anteriormente na subsecção 2.2.2 e
também a utilização do rich text na subsecção 2.2.5, para a label grande com a explicação
do jogo, com a utilização de rich text, para adicionar o texto ’Desafio: / Descubra o valor
da abelha, da flor e do mel / para descobrir como é feito o mel’, a barra fora utilizado
para definir onde terás quebras de linha, possuindo os tamanhos 28 para o titulo e 14 para
o texto, conforme pode ser observado na figura 76. Após criado a label inicial, vamos criar
às próximos labels de texto e imagem, para isso precisamos saber qual vai ser a fórmula de
álgebra usada, nesse projeto usamos os valores x = 3, y = 9 e z = 27, sendo às fórmulas
encontradas na tabela 1, podendo verificar sua resolução de cada linha nas tabelas 2,3
e4, no jogo a ser desenvolvido vamos mudar o X por abelha, Y por flor e Z por mel.
Capítulo 2. Desenvolvimento dos jogos 124
Tabela 1 Formula de álgebra linear a ser usada, com sua quantidade de casas
posicionamento das casas 1 2 3 4 5 6 7 8 9 10
Primeira linha 2 x + y - z = - 1 2
Segunda linha 2 y - 7 x = - x
Terceira linha 3 z - y * y = x - x
Tabela 2 Resolução da primeira linha da formula
2x + y - z = -12
2*3 + 9 - 27 = -12
6 + 9 - 27 = -12
15 - 27 = -12
-12 = -12
Tabela 3 Resolução da segunda linha da formula
2y - 7x = -x
2*9 - 7*3 = -3
18 - 21 = -3
-3 = -3
Tabela 4 Resolução da terceira linha da formula
3z - y * y = x - x
3*27 - 9*9 = 3 - 3
81 - 81 = 0
0 = 0
Capítulo 2. Desenvolvimento dos jogos 125
Figura 76 Definindo o texto formatado de explicação do jogo
2.3.4
Criando as labels de imagem e texto para as formulas de álgebra linear
Na subsecção anterior criamos uma label com a explicação do jogo, e definimos
qual vai ser a formula de algebra a ser utilizada, juntamente com a vizualização de sua
resolução, nessa subsecção agora vamos criar todas as imagens e textos com o mesmo
tamanho, para isso vamos criar uma label com imagem, como fora feito no desenvolvimento
do jogo da memoria na subsecção 2.2.5 e depois de criar a label de imagem copiar para
às outras posições, depois vamos alterar o seu conteúdo de imagem para o valor real,
sendo ele outra imagem ou texto, apenas estaremos usando a imagem para ficar mais fácil
verificar sua localização do que com uma label vazia, para isso vamos copiar a imagem
de abelha transparente, fazendo uma cópia na pasta, e editando ela para ficar com fundo
branco, ficando ainda mais visível, no caso do Windows, apenas abrir no paint e salvar é o
suficiente, pois o paint não trabalha com transparência, portanto faz o fundo ficar branco,
e apertar no rebobinar do editor de recursos, conforme a figura 77, que ao rebobinar o
fundo vai ficar branco conforme a figura 78, tendo feito essa etapa começamos a definir seu
tamanho e ajustar suas posições usando o pontilhado do plano de fundo, colocando quatro
linhas, a primeira com 10, a segunda com 8, a terceira com 10, e a última com 3 grupos
de 3, que vão ser para a verificação do valor, fazendo como foi feito no desenvolvimento
do jogo da memoria na subsecção 2.2.5, adicionando uma imagem e copiando ela, depois
com duas copiando as duas, e assim por diante, como pode ser observado na figura 79,
Capítulo 2. Desenvolvimento dos jogos 126
selecionando oito imagens para copiar para a segunda linha, depois de fazer a copia para
todas as linhas a interface deve estar parecida com a figura 80.
Figura 77
Criando label com a imagem de abelha com fundo transparente, e selecionando
o reset para recarregar as imagens
Figura 78
Label com a imagem de abelha com fundo branco após recarregar as imagens
Capítulo 2. Desenvolvimento dos jogos 127
Figura 79 Copiando labels em conjunto para fazer sua copia
Figura 80 Interface com todas as labels em seus devidos lugares
Capítulo 2. Desenvolvimento dos jogos 128
2.3.5 Mudando as imagens de abelha para seus respectivos valores
Na subsecção anterior criamos todas a labels a serem utilizadas, criando as quatro
linhas com suas posições alinhadas, nessa subsecção vamos começar as labels com a imagem
de abelha pela fórmula de álgebra, começando pela primeira posição da primeira linha,
removendo o pixmap, usando o botão voltar no editor de propriedade, na aba QLabel, ao
lado do pixmap e também desabilitando o escalated contents, conforme pode ser observado
na figura 81, após isso vamos adicionar o número 2, usando rich text, figura 82, para
poder editar seu tamanho e colocar em negrito, depois fazer isso com todos os outros,
usando o mesmo estilo, negrito e do mesmo tamanho para ficar uniforme, sendo o tamanho
utilizado 48 em negrito e centralizado, conforme figura 83, tendo feito isso a interface deve
estar parecida com a figura 84. Para agilizar o processo vamos usar Ctrl + click do mouse
para selecionar várias ao mesmo tempo, podendo remover às abelhas, ou mudar a imagem
de todas ao mesmo tempo, baseado na fórmula, como a quarta casa da primeira linha é
flor(y), a segunda casa da segunda linha é flor, a quarta e sexta casa da terceira linha é
flor, e a primeira casa do conjunto do meio das três abelhas, presente na quarta linha,
selecionando todas ao mesmo tempo, e continuando fazendo isso para cada uma que tiver
repetição, até terminar de arrumar as três fórmulas, e os três comparadores da quarta
linha, caso seja para colocar texto, apertar o voltar no pixmap e scaleted contents, antes
de editar o texto, como fora feito para o número 2.
Figura 81 Selecionando para remover a imagem e seu conteúdo escalado
Capítulo 2. Desenvolvimento dos jogos 129
Figura 82 Selecionando para formatar o texto da label
Figura 83
Formatação do número 2 para a label, seguindo o padrão centralizado, negrito
e fonte 48
Capítulo 2. Desenvolvimento dos jogos 130
Figura 84
Visualização da interface após mudar o primeiro valor de abelha para o número
2
2.3.5.1 Mudando de abelha para flor
Nessa sub-subsecção estaremos selecionando todas as posições onde se encontra a
variável Y da formula, e substituindo a imagem de abelha pela imagem de flor, conforme
a figura 85, tendo trocado a imagem a interface vai ficar conforme a figura 86.
Figura 85 Selecionando as posições do Y para mudar de abelha para a imagem de flor
Capítulo 2. Desenvolvimento dos jogos 131
Figura 86 Visualização após mudar as imagens para flor
2.3.5.2 Mudando de abelha para o número 2
Na sub-subsecção anterior fora arrumado as posições das flores, nessa sub-subsecção
vamos arrumar as outras posições onde se encontra o número 2, selecionando todas as
posições e repetindo o processo que fora feito para o primeiro número 2, ficando conforme
a figura 87.
Capítulo 2. Desenvolvimento dos jogos 132
Figura 87
Visualização após mudar as imagens faltantes para o número 2, conforme feito
anteriormente na figura 84
2.3.5.3 Mudando de abelha para o sinal de igualdade
Na sub-subsecção anterior fora arrumado as posições do número 2 que faltavam,
nessa sub-subsecção vamos arrumar as posições onde se encontram o sinal de igualdade,
para isso seleciona-se todas as posições onde deve possuir o sinal de igualdade, tirando
a imagem e o scalated contents, como na figura 81 da subsecção 2.3.5 e após removido
a imagem selecionamos change rich text, conforme a figura 88, para poder colocar o
sinal de igualdade com formatação, negrito, centralizado de tamanho 48, como pode ser
observado na figura 89, ao confirmar todas as imagens selecionadas vão mudar para o sinal
de igualdade, conforme a figura 90.
Capítulo 2. Desenvolvimento dos jogos 133
Figura 88
Selecionando as posições de igualdade, após remover a imagem e seu conteúdo
escalado, juntamente com a seleção de sua formatação de texto
Figura 89
Formatação do sinal de igualdade, seguindo o padrão centralizado, negrito e
fonte 48
Capítulo 2. Desenvolvimento dos jogos 134
Figura 90 Visualização após mudar as imagens de abelha para o sinal de igualdade
2.3.5.4 Mudando de abelha para o sinal de negativo
Na sub-subsecção anterior fora arrumado os sinais de igualdade, nessa sub-subsecção,
vamos realizar os mesmos passos da anterior, apenas selecionando a posição do sinal de
negativo, e escrevendo o sinal de negativo com formatação especial ao invez do sinal de
igualdade, conforme pode ser observado na figura 91.
Capítulo 2. Desenvolvimento dos jogos 135
Figura 91 Visualização após mudar as imagens de abelha para o sinal de menos
2.3.5.5 Mudando de abelha para a imagem de mel
Na sub-subsecção anterior fora arrumado os sinais de negativo, nessa sub-subsecção,
vamos selecionar as posições onde se encontra a variável Z da formula e substituir a imagem
de abelha pela imagem do pote de mel, como fora feito na sub-subsecção 2.3.5.1, onde fora
trocado pela flor, ao trocar as abelhas por potes de mel a interface deve ficar conforme a
figura 92.
Capítulo 2. Desenvolvimento dos jogos 136
Figura 92 Visualização após mudar as imagens de abelha para a imagem de mel
2.3.5.6 Mudando de abelha para o sinal de positivo
Na sub-subsecção anterior fora arrumado as posições da variável Z, que será
representada pelo pote de mel, nessa sub-subsecção vamos arrumar a posição do sinal
de positivo, considerando que essa e as outras posições que ainda faltam arrumar não
possuem mais de uma posição, tendo apenas uma posição para selecionar, para arrumar o
sinal de positivo, vamos selecionar ele e fazer a mesma coisa feitas nos anteriores e também
no começo na subsecção 2.3.5, que ao invez do número 2 vamos escrever o sinal de
positivo, arrumando para ficar conforme a figura 93.
Capítulo 2. Desenvolvimento dos jogos 137
Figura 93 Visualização após mudar as imagens de abelha para o sinal de positivo
2.3.5.7 Mudando de abelha para o número 1
Na sub-subsecção anterior fora arrumado a posição do sinal de positivo, nessa
sub-subsecção vamos arrumar a posição do número 1, tendo apenas uma posição para
selecionar, para isso vamos selecionar ele e fazer sua formatação como na sub-subsecção
anterior ou na subsecção 2.3.5, escrevendo o número 1 ao invez do número 2, deixando
conforme a figura 94.
Capítulo 2. Desenvolvimento dos jogos 138
Figura 94 Visualização após mudar as imagens de abelha para o número 1
2.3.5.8 Mudando de abelha para o número 7
Na sub-subsecção anterior fora arrumado a posição do número 1, nessa sub-subsecção
vamos arrumar a posição do número 7, tendo apenas uma posição para selecionar e fazendo
os mesmos passos da sub-subsecção anterior, deixando conforme a figura 95.
Capítulo 2. Desenvolvimento dos jogos 139
Figura 95 Visualização após mudar as imagens de abelha para o número 7
2.3.5.9 Mudando de abelha para o número 3
Na sub-subsecção anterior fora arrumado a posição do número 7, nessa sub-subsecção
vamos arrumar a posição do número 3, tendo apenas uma posição para selecionar e fazendo
os mesmos passos da sub-subsecção anterior, deixando conforme a figura 96.
Capítulo 2. Desenvolvimento dos jogos 140
Figura 96 Visualização após mudar as imagens de abelha para o número 3
2.3.5.10 Mudando de abelha para o sinal de multiplicação
Na sub-subsecção anterior fora arrumado a posição do número 3, nessa sub-subsecção
vamos arrumar a posição do sinal de multiplicação, tendo apenas uma posição para
selecionar e fazendo os mesmos passos da sub-subsecção anterior, que invez de escrever
um número vamos escrever o sinal de asterisco, para representação de multiplicação,
deixando conforme a figura 97.
Capítulo 2. Desenvolvimento dos jogos 141
Figura 97
Visualização após mudar as imagens de abelha para o sinal de multiplicação
2.3.6 Criação dos QLine Edit
Na subsecção anterior fora arrumado as labels com a imagem de abelha para
o texto ou imagem correta da formula encontrada na tabela 1, tendo então arrumado
todas os campos onde se tem label, nessa subsecção vamos alterar os campos de label
por campos de texto na última linha, onde se tem a comparação, para isso vamos usar o
QLineEdit, encontrado na caixa de widgets, dentro da aba Input Widgets, chamado Line
Edit, como pode ser observado na figura 98, após colocar ele na aplicação, vamos mudar
seu tamanho para ficar do mesmo tamanho da abelha, cobrindo a imagem de abelha em
sua plenitude, como pode ser observado na figura 99, ao ter feito o primeiro, vamos copiar
para os proximos locais de comparação, mas antes de fazer a cópia, vamos fazer algumas
mudanças, começando pelo seu stylesheet, figura 100, onde vamos mudar o tipo de fonte,
figura 101, mudando para arial, estilo black e com tamanho 40, figura 102, ficando como
estilo font: 87 40pt "Arial";, figura 103, para alterar o stylesheet além de usar o editor
de propriedades se pode apenas aperta com o botão direito no objeto que vai querer
mudar, após ter feito, vamos criar e promovê-la para uma nova classe chamada valores,
não é necessário criar sinais ou receptores, como forá feito no desenvolvimento do jogo da
memoria na subsecção 2.2.6, após ter mudado seu estilo e te-la promovido para valores,
vamos copiar para os outros lugares, figura 104, após estar com todos eles criados, vamos
selecionar os três campos de editor de texto, figura 105, e apertar Ctrl + K para colocar
eles para trás, podendo ver a label com a imagem de abelha, figura 106 o qual precisamos
Capítulo 2. Desenvolvimento dos jogos 142
deletar, lembrando que após estar visível às labels de abelhas é necessário selecionar
novamente, pois a caixa de seleção está no QLineEdit, recomendado fazer uma por vez
para garantir que está deletando o correto, na figura 107 pode se ver a ultima imagem de
abelha selecionada para ser deletada e na figura 108 podemos verificar a interface após ter
deletado todas as imagens, deixando a interface com as formulas corretas.
Figura 98 Criando o Line Edit
Capítulo 2. Desenvolvimento dos jogos 143
Figura 99 Ajustando o tamanho do Line Edit para o tamanho da imagem de abelha
Figura 100 Selecionando o Line Edit para mudar seu estilo
Capítulo 2. Desenvolvimento dos jogos 144
Figura 101 Selecionando para adicionar uma nova fonte
Figura 102 Definindo a nova fonte com arial, black, tamanho 40
Capítulo 2. Desenvolvimento dos jogos 145
Figura 103 Visualização do editor de estilos após adicionar a nova fonte
Figura 104 Copiando a Line Edit para as outras posições de abelha
Capítulo 2. Desenvolvimento dos jogos 146
Figura 105 Selecionando todas os Line Edit
Figura 106 Visualização da interface após mudar todos os Line Edit para o fundo
Capítulo 2. Desenvolvimento dos jogos 147
Figura 107 Selecionando manualmente cada imagem de abelha e as deletando
Figura 108 Visualização da interface após arrumar os Line Edit
Capítulo 2. Desenvolvimento dos jogos 148
2.3.7 Arrumando os componente da interface, label, botão, e Line Edit
Na subsecção anterior fora arrumado os locais das Qline edit, sendo eles os locais
de texto, para poder escrever os valores das variaveis, onde se faras as comparações para
saber se está correto, nessa subsecção vamos arrumar os componentes da interface, sendo
eles a imagem da abelha com fundo branco, nomeando as caixas de texto, promovendo
a widget da interface e criando um botão de verificação, para verificar se os valores
escritos nas caixas de texto estão corretos, começando por deletar a imagem de abelha
com plano de fundo branco da pasta imagens, e colocar a cópia feita anteriormente com
fundo transparente em seu lugar, lembrando de manter o nome que tinha anteriormente, e
recarregar a aplicação, usando o editor de recursos, como anteriormente na subsecção 2.3.4,
tendo apertado para recarregar a interface ficaras conforme a figura 109, agora tendo
terminado a parte das equações vamos começar a criar a parte funcional, como o botão de
verificar, que vai mandar um sinal para widget, fazer a verificação, para isso temos que
promover a widget, como no jogo da memória na sub-subsecção 2.2.8.7, nesse caso vamos
promover o centralwidget para uma classe chamada widget_principal, como na figura 110 e
criar um receptor, chamado verificar(), tendo feito isso vamos criar o botão QPushButton,
como feito na sub-subsecção 2.2.10.3, no centro após a quarta linha, do mesmo tamanho
que a comparação central, como pode ser observado na figura 111, e vamos mudar seu
nome para Verificar juntamente com seu stylesheet, para adicionar um estilo de fonte, para
arial black, tamanho 40 como nos na subsecção anterior ao criar os QLineEdit, ficando font:
87 40pt "Arial";, podendo observar o botão após fazer a mudança no texto na figura 112,
tendo arrumado o botão, vamos mudar os nomes das QLineEdit, para nomes mais fácil
de se trabalhar, para isso vamos usar o botão direito change objectname, figura 113, e
colocar seus nomes, respectivamente, valor_abelha, valor_flor e valor_mel.
Capítulo 2. Desenvolvimento dos jogos 149
Figura 109
Visualização da interface após recarregar as imagens, fazendo as imagens de
abelha ficarem com fundo transparente
Figura 110 Promovendo centralwidget para widget_principal
Capítulo 2. Desenvolvimento dos jogos 150
Figura 111 Criando botão
Figura 112
Mudando texto e estilo de fonte do botão para Verificar com fonte arial,
black, tamanho 40
Capítulo 2. Desenvolvimento dos jogos 151
Figura 113 Selecionando o Line Edit para mudar seu nome
2.3.8
Criando link manualmente entre o botão verificar e a widget_principal
Na subsecção anterior fora arrumado as labels de abelha, nomeados os inputs de
texto, e criado um botão verificar, nessa subsecção vamos criar o link entre o botão verificar
e a widget_principal, para isso vai ser necessário cria-lo manualmente por não ser possivel
selecionar a widget_principal no modo de editor de sinais, para isso vamos até o editor
de sinais e receptores no canto direito inferior, figura 114, para linkar a função clicked do
botão, com a função criada verificar() do widget_principal, para isso é necessario apertar
no botão de positivo para criar um novo link, figura 115, ao ser clicado no botão vai
permitir fazer a seleção de quem envia o sinal, qual é o sinal, quem vai receber e qual vai
ser o receptor, figura 116, para poder visualizar o nome dos componentes é possível mudar
sua barra de tamanho, estendendo ela, fazendo isso para todos os locais de selecionar,
para poder ver o nome completo e selecionar o botão pushButton como quem vai enviar o
sinal, figura 117, para o tipo de sinal vamos selecionar o sinal clicked() nativo do botão,
figura 118, para quem vai receber o sinal vamos selecionar central_widget, figura 119,
por fim vamos selecionar o receptor verificar() qual fora criado na subsecção anterior,
figura 120, ao completar de arrumar o link criado deve ficar conforme a figura 121.
Capítulo 2. Desenvolvimento dos jogos 152
Figura 114 Selecionando a aba de sinais e receptores do canto inferior direito
Figura 115
Selecionando a criação de novo sinal na aba de sinais e receptores do canto
inferior direito
Capítulo 2. Desenvolvimento dos jogos 153
Figura 116
Visualização da barra de tamanho do texto na aba de sinal e receptores, com
tamanho pequeno
Capítulo 2. Desenvolvimento dos jogos 154
Figura 117
Selecionando o botão verificar, como quem envia após estender o tamanho
do texto, tornando-o visível
Capítulo 2. Desenvolvimento dos jogos 155
Figura 118 Selecionando o sinal clicked() do botão verificar
Capítulo 2. Desenvolvimento dos jogos 156
Figura 119 Selecionando a widget_principal, como quem vai receber o sinal
Capítulo 2. Desenvolvimento dos jogos 157
Figura 120 Selecionando o receptor verificar() da widget_principal
Capítulo 2. Desenvolvimento dos jogos 158
Figura 121
Visualização da aba de sinais e receptores, após fazer a criação do link entre
o botão verificar e a widget_principal
2.3.9 Criando a widget escondido
Na subsecção anterior criamos o link entre o botão verificar e a widget_principal
manualmente, nessa subsecção vamos criar a widget escondida a qual vai aparecer quando
todos os valores estiverem corretos, como fora feito na criação do jogo da memoria, quando
as cartas estava certa na subsecção 2.2.10.1, vamos pegar uma widget na caixa de widgets,
na aba de Containers, cobrindo toda a tela deixando apenas uma linha de pontilhado de
margem, com seu background-color: rgb(170,170,170);, utilizando o stylesheet como feito
anteriormente, figura 122, tendo criado vamos promover para a classe escondido, figura 123,
tendo promovido vamos criar alguns slots para a classe escondido, chamados play_video()
para parar se estiver tocando e tocar se estiver parado o vídeo, mediastate_changed() com
o objetivo de verificar quando tiver uma mudança no estado do vídeo e setposition() para
definir em qual posição(tempo do vídeo) o vídeo está,figura 124, depois de feito vamos
mudar seu nome para widget_escondida, pois será necessário mais tarde, como fora feito
para os campos de texto na subsecção 2.3.7.
Capítulo 2. Desenvolvimento dos jogos 159
Figura 122 Criação da widget, e definindo sua cor para cinza com o rgb(170,170,170)
Figura 123 Selecionando a widget para promove-la para escondido
Capítulo 2. Desenvolvimento dos jogos 160
Figura 124 Adicionando os sinais da widget escondido
2.3.10 Criação dos componentes da widget_escondida
Na subsecção anterior fora criado um widget com o nome de widget_escondida e
promovido para a classe escondido com 3 receptores, nessa subsecção vamos criar alguns
utensílios para o reprodutor de vídeo, sendo uma barra deslizante para ficar em cima do
botão e abaixo do vídeo, uma label com uma imagem de play no meio da tela, com plano
de fundo preto rgb(0,0,0), e um botão fechar.
2.3.10.1 Criação do botão da widget_escondida
Nessa sub-subsecção vamos criar o botão da widget_escondida o qual podemos
copiar o outro botão criado chamado verificar, para manter o mesmo tamanho uniforme,
selecionando a widget escondida e apertando para ir para baixo e para cima após copiado
utilizando o atalhos ctrl+k e ctrl+l como feito na criação dos inputs de texto na subsec-
ção 2.3.6, tendo copiado vamos mudar sua fonte e cor de plano de fundo no stylesheet,
apagando o existente para não confundir, figura 125, vamos usar a mesma cor usada
no jogo de memória, rgb(240,240,240), figura 126, e para a fonte vamos usar a mesma
usada no outro botão e campos de texto, font: 87 40pt "Arial";, figura 127, mas como
é necessário usar dois estilos, figura 128, vamos juntar eles, apertando delete depois do
ponto e virgula( ; ) da primeira linha, figura 129, para fazer que fiquem na mesma linha,
evitando complicações durante o desenvolvimento futuro.
Capítulo 2. Desenvolvimento dos jogos 161
Figura 125
Copiado a botão verificar para a widget escondido e selecionado a edição de
estilo do botão, removido seu conteúdo, para recria-lo
Figura 126 Adicionado plano de fundo para o botão
Capítulo 2. Desenvolvimento dos jogos 162
Figura 127 Adicionando uma fonte para o botão sendo arial, black, tamanho 40
Figura 128
Visualização do estilo do botão com duas linhas, sendo cor de fundo e fonte
Capítulo 2. Desenvolvimento dos jogos 163
Figura 129
Visualização do estilo do botão com cor de fundo e fonte, em uma única
linha
2.3.10.2 Criação da barra de rolagem da widget_escondida
Na sub-subsecção anterior fora criado o botão da widget_escondida e arrumado
seu estilo, nessa sub-subsecção vamos criar a barra de rolagem do video, encontrada na
caixa de widgets, na aba de inputs, no mesmo lugar onde se encontra o line edit, o item a
ser utilizado se chama horizontal slider, vamos criar ela e aumentar deixando uma pequena
margem de ambos os lados,figura 130.
Capítulo 2. Desenvolvimento dos jogos 164
Figura 130 Criando a barra de rolagem para o vídeo
2.3.10.3 Criação da label play, para o tocador de vídeo da widget_escondida
Na sub-subsecção anterior fora criado a barra de andamento do vídeo, nessa sub-
subsecção vamos criar o uma label com a image de play, começando pela criação de uma
label mediana quadrada no meio da tela e selecionando a imagem play, figura 131, tendo
criado como na figura 132, vamos arrumar seu background para preto sendo ele o rgb(0,0,0),
figura 133.
Capítulo 2. Desenvolvimento dos jogos 165
Figura 131 Criando label e definindo sua imagem como play
Figura 132
Visualização da interface da widget_escondida, após criação da label com a
imagem do play
Capítulo 2. Desenvolvimento dos jogos 166
Figura 133
Visualização da interface da widget escondido, após mudar a cor de fundo
da label com a imagem do play para preto rgb(0,0,0)
2.3.11
Promovendo os componentes da widget_escondida e mudando o nome
da botão
Na subsecção anterior fora criado os componentes da widget_escondida nessa
subsecção, vamos promover a label para clicklabel, com o sinal click(), e o Qslider,
sendo o horizontal slider, vamos promover para media_slider, e criar os receptores, slots,
duration_changed() e position_changed(), e mudar o texto no botão para fechar.
2.3.11.1 Promovendo a label da imagem do play para uma clicklabel
Nessa sub-subsecção vamos promover a label de imagem para uma clicklabel, como
fora feito na subsecção ??,
começando com sua promoção para clicklabel, figura 134, e a criação do sinal click(),
figura 135.
Capítulo 2. Desenvolvimento dos jogos 167
Figura 134 Selecionando a label da imagem do play, para promove-la para clicklabel
Figura 135 Adicionando o sinal click(), para a classe especial clicklabel
2.3.11.2 Promovendo a barra de rolagem para media_slider
Na sub-subsecção anterior fora promovido a label para clicklabel e criado seu
sinal click(), nessa sub-subsecção vamos promover a barra de rolagem para media_slider,
Capítulo 2. Desenvolvimento dos jogos 168
figura 136, e criar os receptores duration_changed() e position_changed(), figura 137.
Figura 136 Selecionando a barra de rolagem, para promove-la para media_slider
Figura 137
Adicionando os receptores duration_changed() e position_changed(), para a
classe especial media_slider
Capítulo 2. Desenvolvimento dos jogos 169
2.3.11.3 Mudando o texto do botão para Fechar
Na sub-subsecção anterior fora promovido a barra de rolagem para media_slider e
criado seus receptores, nessa sub-subsecção vamos mudar o texto do botão para Fechar,
apertando duas vezes no texto, ou usando o botão direito e selecionando para mudar o
texto ficando como a figura 138.
Figura 138
Visualização da interface após mudar o nome do botão de verificar para
fechar
2.3.12 Criação da widget para tocar vídeo
Na subsecção anterior fora promovido os componentes da widget_escondida, nessa
subsecção vamos criar uma widget para rodar o vídeo, cobrindo toda a tela, antes do
slider, figura 139, mudar seu plano de fundo para preto rgb(0,0,0) para ficar mais visível
e vamos promover para uma classe video, figura 140, criamos um sinal click() como na
clicklabel, figura 141, e depois selecionar a label apertar Ctrl+K, figura 142, para deixar
ele por baixo da label de imagem, ficando a imagem do play na sua frente, figura 143.
Capítulo 2. Desenvolvimento dos jogos 170
Figura 139 Criando widget e definindo sua cor de fundo para preto rgb(0,0,0)
Figura 140 Promovendo a nova widget para a classe especial video
Capítulo 2. Desenvolvimento dos jogos 171
Figura 141 Adicionando o sinal click() para a classe especial video
Figura 142 Selecionando a widget video, para move-la para o fundo
Capítulo 2. Desenvolvimento dos jogos 172
Figura 143
Visualização da interface após mover a widget video para o fundo, tornando
o label de play visível
2.3.13 Criação dos links da widget_escondida
Na subsecção anterior fora criado a label para o vídeo, nessa subsecção vamos criar
os links entre o video e os componentes da widget_escondida, usando o editor de sinais no
canto esquerdo superior, como feito na subsec 2.2.10.2, linkando o click() da clicklabel, com
o receptor play_video() da widget escondido, figura 144, o click() da widget video, com o
receptor play_video() da widget escondido, figura 145, o sinal sliderMoved() de QSlider,
com o receptor set_position da widget escondido, figura 146, e o clicked() do botão fechar
com o receptor close() da MainWindow, figura 147, que é necessário habilitar os sinais e
receptores herdados, no checkbox, figura 148, para poder selecionar o MainWindow com a
seta, é necessário arrastar o mousse para fora da tela. Tendo feito isso, terminamos
tudo que precisava ser feito no QT Designer, salvar o arquivo .ui, nesse caso chamamos
ele de interface.ui.
Capítulo 2. Desenvolvimento dos jogos 173
Figura 144
Criando link entre o sinal click() da label do play e o receptor play_video()
da widget escondido
Figura 145 Criando link entre o sinal click() da widget video e o receptor play_video()
da widget escondido
Capítulo 2. Desenvolvimento dos jogos 174
Figura 146
Criando link entre o sinal sliderMoved() da barra de rolagem media_slider e
o receptor set_position() da widget escondido
Figura 147
Criando link entre o sinal clicked() do botão fechar e o receptor close() da
MainWindow, que precisa ser herdado do QWidget
Capítulo 2. Desenvolvimento dos jogos 175
Figura 148
Criando link entre o sinal clicked() do botão fechar e o receptor close()
da MainWindow, após habilitar a visualização dos sinais e receptores da
QWidget
2.3.14 convertendo os arquivos
Na subsecção anterior fora criado os links entre o vídeo e seus componentes, nessa
subsecção vamos converter o arquivo os recursos.qrc e interface.ui para arquivos Python,
usando os comandos no terminal como no jogo da memória na subsecção 2.2.8, usando cd
até chegar na pasta, e executando os comandos de conversão 28 e29.
1pyside2r c c r e c u r s o s . q rc o r e c u r s o s . py
digo 28
Comando utilizado paraconverter arquivos .qrc para .py, nesse caso converter
recursos.qrc para recursos.py
1pyside2u ic i n t e r f a c e . ui > i n t e r f a c e . py
digo 29
Comando utilizado para converter arquivos .ui para .py, nesse caso converter
interface.ui para interface.py
2.3.15 Criando os importes para o aplicativo.py
Na subsecção anterior fora convertido o recursos.qrc e algebra.ui para arquivos
python, nessa subsecção vamos começar a criar o aplicativo.py com no jogo da memoria
na subsecção 2.2.8.4, fazendo os imports generalizados, fazendo algumas mudanças, como
Capítulo 2. Desenvolvimento dos jogos 176
tirando time e random, os quais não precisaremos e adicionando o os, o qual precisaremos
para definir o caminho onde o vídeo se encontra, além de adicionar dois novos importes
para reprodução de vídeo, sendo eles QtMultimediaWidgets e QtMultimedia, conforme
pode ser observado no digo 30.
1# coding : u t f 8
2#Imp ortando o s i s t e m a e o s i s t e m a o p e r a c i o n a l , a l i n h a de cima d e f i n e o
t i p o de c ó d i go a s e r usado no python , o hashtag (#) é u t i l i z a d o para
d e f i n i r coment á r i o s .
3import sys , os
4#Importando as imagens do qrc , que foram c o n v e r t i d a s para o a rqui vo
r e c u r s o s . py .
5import r e c u r s o s
6
7#Importando os o b j e t o s do PySide2 u t i l i z a d o s no programa , simboliza tudo
em python
8from PySide2 . QtGui import
9from PySide2 . QtWidgets import
10 from PySide2 . QtCore import
11
12 #Importando os o b j e t o s do PySide2 u t i l i z a d o s para reprodu ç ão de v í deo
13 from PySide2 . QtMultimediaWidgets import QVideoWidget
14 from PySide2 . QtMultimedia import
digo 30 Criando os importes generalizados para o aplicativo
2.3.16 Criando a função de conversor de caminho
Na subsecção anterior criamos os importes genéricos a serem utilizados na aplicação,
nessa subsecção vamos criar uma função para converter o caminho onde o vídeo se encontra,
por não ser possivel usar o arquivo qrc para vídeos, para isso usamos o caminho MeiPass
para o criador de executável pyinstaller, para que ele possa ler o vídeo, encontrado em
vários materiais de apoio como em (NAUTILIUS,2015;AHMEDWAS,2018), sendo ele
o motivo de precisar importar o ’os’ junto do ’sys’, pois precisamos pegar o caminho do
sistema operacional e do sistema atual, fazendo uma comparação de qual fora possível ter
acesso, e retornando um caminho que funcione para execução normal ou na criação de um
executável, como pode ser observado no digo 31.
1#Funç ã o para c o nv e r s ã o de caminho do s i s t e m a o p e r a c i o n a l , p ara su a u t i l i z a ç
ão durante a c r i a ç ão de e xecut á v e i s .
2de f r e so urce _ pa t h ( r e l a t i v e _ p a t h ) :
3" " " Get a bs ol ut e path to res our ce , works f o r dev and f o r P y I n s t a l l e r
" " "
4#t r y comando pa ra t e n t a r e xe cu t ar a lg o
5try :
6# P y I n s t a l l e r c r e a t e s a temp f o l d e r and s t o r e s path i n _MEIPASS
Capítulo 2. Desenvolvimento dos jogos 177
7# P y I n s t a l l e r c r i a um arq ui vo tempor á r i o para armazenar o caminho
dos i t e n s chamado _MEIPASS
8base_path = s ys ._MEIPASS
9#except comando para v e r i f i c a r se fr a c a ss o u ao t e n ta r e x ecu t ar no try ,
se gun do par â metro é o t i p o de e r r o r , n e s s e c a so Ex ce ptio n , s e der uma
e xc e ç ão , f a ç a
10 except Exception :
11 #Aqui s e usa o caminho padr ã o do s is te ma o p e r a c i o n a l
12 base_path = os . path . abspath ( ".")
13
14 #Aqui e st amos r e to r nando o caminho c o n v e r t i d o com r e tu r n , para c a so s e j a
normal , ou na c r i a ç ão do e xe cut á v e l
15 r e t u r n o s . path . j o i n ( base_path , r e l a t i v e _ p a t h )
digo 31 Criando função de correção do caminho para arquivos externos
2.3.17 Copiando a interface convertida para o aplicativo.py
Na subsecção anterior fora criado a função de conversão do caminho, para funcionar
para a criação do executável, nessa subsecção vamos copiar a classe Ui_MainWindow(object):
do arquivo interface.py, que foi criado no QT Designer, para o aplicativo.py, sendo possivel
observar a classe Ui_MainWindow(object) no digo 32.
1#I n t e r f a c e c r i a d a no QT D es ign er , p r e s e n t e d en t ro do i n t e r f a c e . py
2class Ui_MainWindow( object) :
3de f s etupUi ( s e l f , MainWindow ) :
4i f not MainWindow . objectName ( ) :
5MainWindow . setObjectName ( u"MainWindow")
6MainWindow . r e s i z e ( 9 51 , 684)
7s e l f . c e n t r a l w i d g e t = w i d g e t _ p r i n c i p a l ( MainWindow )
8s e l f . c e n t r a l w i d g e t . setObjectName ( u" centralwidget " )
9s e l f . l abe l_ 2 = QLabel ( s e l f . c e n t r a l w i d g e t )
10 s e l f . l a b e l _ 2 . setObjectName (u" label_2 " )
11 s e l f . l a b e l _ 2 . setGeometry (QRect (120 , 190 , 71 , 81) )
12 s e l f . l a b e l _ 2 . setPixmap (QPixmap( u":/ imagens /abelha " ) )
13 s e l f . l a b el_2 . s e t S c a l e d C o n t e n t s ( True )
14 s e l f . l abel_25 = QLabel ( s e l f . c e n t r a l w i d g e t )
15 s e l f . label_25 . setObjectName ( u" label_25" )
16 s e l f . label_25 . setGeometry ( QRect ( 30 , 40 , 891 , 121) )
17 s e l f . l abe l_ 3 = QLabel ( s e l f . c e n t r a l w i d g e t )
18 s e l f . l a b e l _ 3 . setObjectName (u" label_3 " )
19 s e l f . l a b e l _ 3 . setGeometry (QRect (30 , 190 , 71 , 81) )
20 s e l f . l abe l_ 4 = QLabel ( s e l f . c e n t r a l w i d g e t )
21 s e l f . l a b e l _ 4 . setObjectName (u" label_4 " )
22 s e l f . l a b e l _ 4 . setGeometry (QRect (300 , 190 , 71 , 81) )
23 s e l f . l a b e l _ 4 . setPixmap (QPixmap( u":/ imagens /flor" ) )
24 s e l f . l a b el_4 . s e t S c a l e d C o n t e n t s ( True )
Capítulo 2. Desenvolvimento dos jogos 178
25 s e l f . l abe l_ 5 = QLabel ( s e l f . c e n t r a l w i d g e t )
26 s e l f . l a b e l _ 5 . setObjectName (u" label_5 " )
27 s e l f . l a b e l _ 5 . setGeometry (QRect (210 , 190 , 71 , 81) )
28 s e l f . l abe l_ 6 = QLabel ( s e l f . c e n t r a l w i d g e t )
29 s e l f . l a b e l _ 6 . setObjectName (u" label_6 " )
30 s e l f . l a b e l _ 6 . setGeometry (QRect (480 , 190 , 71 , 81) )
31 s e l f . l a b e l _ 6 . setPixmap (QPixmap( u":/ imagens /mel" ) )
32 s e l f . l a b el_6 . s e t S c a l e d C o n t e n t s ( True )
33 s e l f . l abe l_ 7 = QLabel ( s e l f . c e n t r a l w i d g e t )
34 s e l f . l a b e l _ 7 . setObjectName (u" label_7 " )
35 s e l f . l a b e l _ 7 . setGeometry (QRect (390 , 190 , 71 , 81) )
36 s e l f . l abe l_ 8 = QLabel ( s e l f . c e n t r a l w i d g e t )
37 s e l f . l a b e l _ 8 . setObjectName (u" label_8 " )
38 s e l f . l a b e l _ 8 . setGeometry (QRect (660 , 190 , 71 , 81) )
39 s e l f . l abe l_ 9 = QLabel ( s e l f . c e n t r a l w i d g e t )
40 s e l f . l a b e l _ 9 . setObjectName (u" label_9 " )
41 s e l f . l a b e l _ 9 . setGeometry (QRect (570 , 190 , 71 , 81) )
42 s e l f . l abel_10 = QLabel ( s e l f . c e n t r a l w i d g e t )
43 s e l f . label_10 . setObjectName ( u" label_10" )
44 s e l f . label_10 . setGeometry ( QRect ( 7 50 , 1 90 , 71 , 81) )
45 s e l f . l abel_11 = QLabel ( s e l f . c e n t r a l w i d g e t )
46 s e l f . label_11 . setObjectName ( u" label_11" )
47 s e l f . label_11 . setGeometry ( QRect ( 8 40 , 1 90 , 71 , 81) )
48 s e l f . l abel_12 = QLabel ( s e l f . c e n t r a l w i d g e t )
49 s e l f . label_12 . setObjectName ( u" label_12" )
50 s e l f . label_12 . setGeometry ( QRect ( 6 60 , 2 90 , 71 , 81) )
51 s e l f . l abel_13 = QLabel ( s e l f . c e n t r a l w i d g e t )
52 s e l f . label_13 . setObjectName ( u" label_13" )
53 s e l f . label_13 . setGeometry ( QRect ( 2 10 , 2 90 , 71 , 81) )
54 s e l f . label_13 . setPixmap (QPixmap( u":/ imagens/flor" ) )
55 s e l f . l a b el _ 1 3 . s e t S c a l e d C o n t e n t s ( True )
56 s e l f . l abel_14 = QLabel ( s e l f . c e n t r a l w i d g e t )
57 s e l f . label_14 . setObjectName ( u" label_14" )
58 s e l f . label_14 . setGeometry ( QRect ( 4 80 , 2 90 , 71 , 81) )
59 s e l f . label_14 . setPixmap (QPixmap( u":/ imagens/abelha " ) )
60 s e l f . l a b el _ 1 4 . s e t S c a l e d C o n t e n t s ( True )
61 s e l f . l abel_15 = QLabel ( s e l f . c e n t r a l w i d g e t )
62 s e l f . label_15 . setObjectName ( u" label_15" )
63 s e l f . label_15 . setGeometry ( QRect ( 1 20 , 2 90 , 71 , 81) )
64 s e l f . l abel_16 = QLabel ( s e l f . c e n t r a l w i d g e t )
65 s e l f . label_16 . setObjectName ( u" label_16" )
66 s e l f . label_16 . setGeometry ( QRect ( 5 70 , 2 90 , 71 , 81) )
67 s e l f . l abel_17 = QLabel ( s e l f . c e n t r a l w i d g e t )
68 s e l f . label_17 . setObjectName ( u" label_17" )
69 s e l f . label_17 . setGeometry ( QRect ( 3 00 , 2 90 , 71 , 81) )
70 s e l f . l abel_18 = QLabel ( s e l f . c e n t r a l w i d g e t )
71 s e l f . label_18 . setObjectName ( u" label_18" )
Capítulo 2. Desenvolvimento dos jogos 179
72 s e l f . label_18 . setGeometry ( QRect ( 3 90 , 2 90 , 71 , 81) )
73 s e l f . l abel_19 = QLabel ( s e l f . c e n t r a l w i d g e t )
74 s e l f . label_19 . setObjectName ( u" label_19" )
75 s e l f . label_19 . setGeometry ( QRect ( 7 50 , 2 90 , 71 , 81) )
76 s e l f . label_19 . setPixmap (QPixmap( u":/ imagens/abelha " ) )
77 s e l f . l a b el _ 1 9 . s e t S c a l e d C o n t e n t s ( True )
78 s e l f . l abel_20 = QLabel ( s e l f . c e n t r a l w i d g e t )
79 s e l f . label_20 . setObjectName ( u" label_20" )
80 s e l f . label_20 . setGeometry ( QRect ( 7 50 , 3 90 , 71 , 81) )
81 s e l f . l abel_21 = QLabel ( s e l f . c e n t r a l w i d g e t )
82 s e l f . label_21 . setObjectName ( u" label_21" )
83 s e l f . label_21 . setGeometry ( QRect ( 1 20 , 3 90 , 71 , 81) )
84 s e l f . label_21 . setPixmap (QPixmap( u":/ imagens/mel " ) )
85 s e l f . l a b el _ 2 1 . s e t S c a l e d C o n t e n t s ( True )
86 s e l f . l abel_22 = QLabel ( s e l f . c e n t r a l w i d g e t )
87 s e l f . label_22 . setObjectName ( u" label_22" )
88 s e l f . label_22 . setGeometry ( QRect ( 3 00 , 3 90 , 71 , 81) )
89 s e l f . label_22 . setPixmap (QPixmap( u":/ imagens/flor" ) )
90 s e l f . l a b el _ 2 2 . s e t S c a l e d C o n t e n t s ( True )
91 s e l f . l abel_23 = QLabel ( s e l f . c e n t r a l w i d g e t )
92 s e l f . label_23 . setObjectName ( u" label_23" )
93 s e l f . label_23 . setGeometry ( QRect ( 5 70 , 3 90 , 71 , 81) )
94 s e l f . l abel_24 = QLabel ( s e l f . c e n t r a l w i d g e t )
95 s e l f . label_24 . setObjectName ( u" label_24" )
96 s e l f . label_24 . setGeometry ( QRect ( 2 10 , 3 90 , 71 , 81) )
97 s e l f . l abel_26 = QLabel ( s e l f . c e n t r a l w i d g e t )
98 s e l f . label_26 . setObjectName ( u" label_26" )
99 s e l f . label_26 . setGeometry ( QRect ( 6 60 , 3 90 , 71 , 81) )
100 s e l f . label_26 . setPixmap (QPixmap( u":/ imagens/abelha " ) )
101 s e l f . l a b el _ 2 6 . s e t S c a l e d C o n t e n t s ( True )
102 s e l f . l abel_27 = QLabel ( s e l f . c e n t r a l w i d g e t )
103 s e l f . label_27 . setObjectName ( u" label_27" )
104 s e l f . label_27 . setGeometry ( QRect ( 3 90 , 3 90 , 71 , 81) )
105 s e l f . l abel_28 = QLabel ( s e l f . c e n t r a l w i d g e t )
106 s e l f . label_28 . setObjectName ( u" label_28" )
107 s e l f . label_28 . setGeometry ( QRect ( 4 80 , 3 90 , 71 , 81) )
108 s e l f . label_28 . setPixmap (QPixmap( u":/ imagens/flor" ) )
109 s e l f . l a b el _ 2 8 . s e t S c a l e d C o n t e n t s ( True )
110 s e l f . l abel_29 = QLabel ( s e l f . c e n t r a l w i d g e t )
111 s e l f . label_29 . setObjectName ( u" label_29" )
112 s e l f . label_29 . setGeometry ( QRect ( 8 40 , 3 90 , 71 , 81) )
113 s e l f . label_29 . setPixmap (QPixmap( u":/ imagens/abelha " ) )
114 s e l f . l a b el _ 2 9 . s e t S c a l e d C o n t e n t s ( True )
115 s e l f . l abel_30 = QLabel ( s e l f . c e n t r a l w i d g e t )
116 s e l f . label_30 . setObjectName ( u" label_30" )
117 s e l f . label_30 . setGeometry ( QRect ( 30 , 390 , 71 , 81) )
118 s e l f . l abel_31 = QLabel ( s e l f . c e n t r a l w i d g e t )
Capítulo 2. Desenvolvimento dos jogos 180
119 s e l f . label_31 . setObjectName ( u" label_31" )
120 s e l f . label_31 . setGeometry ( QRect ( 30 , 490 , 71 , 81) )
121 s e l f . label_31 . setPixmap (QPixmap( u":/ imagens/abelha " ) )
122 s e l f . l a b el _ 3 1 . s e t S c a l e d C o n t e n t s ( True )
123 s e l f . l abel_32 = QLabel ( s e l f . c e n t r a l w i d g e t )
124 s e l f . label_32 . setObjectName ( u" label_32" )
125 s e l f . label_32 . setGeometry ( QRect ( 1 20 , 4 90 , 71 , 81) )
126 s e l f . l abel_34 = QLabel ( s e l f . c e n t r a l w i d g e t )
127 s e l f . label_34 . setObjectName ( u" label_34" )
128 s e l f . label_34 . setGeometry ( QRect ( 6 60 , 4 90 , 71 , 81) )
129 s e l f . label_34 . setPixmap (QPixmap( u":/ imagens/mel " ) )
130 s e l f . l a b el _ 3 4 . s e t S c a l e d C o n t e n t s ( True )
131 s e l f . l abel_35 = QLabel ( s e l f . c e n t r a l w i d g e t )
132 s e l f . label_35 . setObjectName ( u" label_35" )
133 s e l f . label_35 . setGeometry ( QRect ( 7 50 , 4 90 , 71 , 81) )
134 s e l f . l abel_37 = QLabel ( s e l f . c e n t r a l w i d g e t )
135 s e l f . label_37 . setObjectName ( u" label_37" )
136 s e l f . label_37 . setGeometry ( QRect ( 3 40 , 4 90 , 71 , 81) )
137 s e l f . label_37 . setPixmap (QPixmap( u":/ imagens/flor" ) )
138 s e l f . l a b el _ 3 7 . s e t S c a l e d C o n t e n t s ( True )
139 s e l f . l abel_38 = QLabel ( s e l f . c e n t r a l w i d g e t )
140 s e l f . label_38 . setObjectName ( u" label_38" )
141 s e l f . label_38 . setGeometry ( QRect ( 4 30 , 4 90 , 71 , 81) )
142 s e l f . v alor_abe lha = v a l o r e s ( s e l f . c e n t r a l w i d g e t )
143 s e l f . valor_abelha . setObjectName ( u"valor_abelha")
144 s e l f . valor_abelha . setGeometry ( QRect (21 0 , 490 , 71 , 81) )
145 s e l f . v alor_ abelha . s e t S t y l e S h e e t ( u"font: 87 40pt \" A r i a l \";")
146 s e l f . v a l o r _ f l o r = v a l o r e s ( s e l f . c e n t r a l w i d g e t )
147 s e l f . v a l o r _ f l o r . setObjectName ( u"valor_flor")
148 s e l f . v a l o r _ f l o r . setGeometry ( QRect ( 52 0 , 490 , 7 1 , 8 1) )
149 s e l f . v a l o r _ f l o r . s e t S t y l e S h e e t ( u"font : 87 40pt \" A r i a l \";")
150 s e l f . va lor _m el = v a l o r e s ( s e l f . c e n t r a l w i d g e t )
151 s e l f . valor_mel . setObjectName ( u" valor_mel " )
152 s e l f . valor_mel . setGeometry ( QRect ( 8 40 , 4 90 , 71 , 81) )
153 s e l f . valor_mel . s e t S t y l e S h e e t ( u"font : 87 40pt \" A r i a l \";")
154 s e l f . pushButton = QPushButton ( s e l f . c e n t r a l w i d g e t )
155 s e l f . pushButton . setObjectName ( u"pushButton")
156 s e l f . pushButton . setGeometry ( QRect ( 3 40 , 5 90 , 251 , 71) )
157 s e l f . pushButton . s e t S t y l e S h e e t ( u"font : 87 40pt \" A r i a l \";")
158 s e l f . w id ge t_ es co nd id a = e sco ndido ( s e l f . c e n t r a l w i d g e t )
159 s e l f . widget_escondida . setObjectName ( u"widget_escondida" )
160 s e l f . widget_escondida . setGeometry ( QRect (1 0 , 10 , 9 31 , 6 61) )
161 s e l f . widge t_esco nd ida . s e t S t y l e S h e e t ( u"background -color: rgb (170 ,
170 , 170) ;" )
162 s e l f . pushButton_2 = QPushButton ( s e l f . widget_es condida )
163 s e l f . pushButton_2 . setObjectName ( u"pushButton_2")
164 s e l f . pushButton_2 . setGeometry ( QRect (35 0 , 570 , 251 , 71) )
Capítulo 2. Desenvolvimento dos jogos 181
165 s e l f . pushButton_2 . s e t S t y l e S h e e t ( u" background - color: rgb (240, 240 ,
240);font : 87 40pt \" A r i a l \";")
166 s e l f . h o r i z o n t a l S l i d e r = medi a _ s lider ( s e l f . widget_escondida )
167 s e l f . h o r i z o n t a l S l i d e r . setObjectName ( u" horizontalSlider " )
168 s e l f . h o r i z o n t a l S l i d e r . setGeometry ( QRect ( 40 , 5 30 , 851 , 31) )
169 s e l f . h o r i z o n t a l S l i d e r . s e t O r ie n t a t i o n ( Qt . H or izo nt a l )
170 s e l f . l a b e l = c l i c k l a b e l ( s e l f . widget_escondi da )
171 s e l f . l a b e l . setObjectName ( u"label" )
172 s e l f . l a b e l . setGeometry ( QRect ( 330 , 160 , 271 , 191) )
173 s e l f . l a b e l . s e t S t y l e S h e e t ( u" background -color : rgb(0, 0, 0);" )
174 s e l f . l a b e l . setPixmap ( QPixmap( u":/imagens /play " ) )
175 s e l f . l a b e l . s e t S c a l e d C o n t e n t s ( True )
176 s e l f . widget = v ideo ( s e l f . widget_escondi da )
177 s e l f . widget . setObjectName ( u" widget " )
178 s e l f . widget . setGeometry ( QRect ( 0 , 0 , 931 , 521) )
179 s e l f . widge t . s e t S t y l e S h e e t ( u" background -color : rgb(0, 0, 0);" )
180 s e l f . widget . r a i se_ ( )
181 s e l f . pushButton_2 . ra i se_ ( )
182 s e l f . h o r i z o n t a l S l i d e r . ra i se_ ( )
183 s e l f . l a b e l . ra i se_ ( )
184 MainWindow . s et Ce nt ralWidget ( s e l f . c e n t r a l w i d g e t )
185 s e l f . valor_mel . r ais e _ ( )
186 s e l f . v a l o r _ f l o r . r ais e_ ( )
187 s e l f . valor_abelha . ra i se_ ( )
188 s e l f . l a b e l _ 2 . ra i se_ ( )
189 s e l f . label_25 . r ais e _ ( )
190 s e l f . l a b e l _ 3 . ra i se_ ( )
191 s e l f . l a b e l _ 4 . ra i se_ ( )
192 s e l f . l a b e l _ 5 . ra i se_ ( )
193 s e l f . l a b e l _ 6 . ra i se_ ( )
194 s e l f . l a b e l _ 7 . ra i se_ ( )
195 s e l f . l a b e l _ 8 . ra i se_ ( )
196 s e l f . l a b e l _ 9 . ra i se_ ( )
197 s e l f . label_10 . r ais e _ ( )
198 s e l f . label_11 . r ais e _ ( )
199 s e l f . label_12 . r ais e _ ( )
200 s e l f . label_13 . r ais e _ ( )
201 s e l f . label_14 . r ais e _ ( )
202 s e l f . label_15 . r ais e _ ( )
203 s e l f . label_16 . r ais e _ ( )
204 s e l f . label_17 . r ais e _ ( )
205 s e l f . label_18 . r ais e _ ( )
206 s e l f . label_19 . r ais e _ ( )
207 s e l f . label_20 . r ais e _ ( )
208 s e l f . label_21 . r ais e _ ( )
209 s e l f . label_22 . r ais e _ ( )
210 s e l f . label_23 . r ais e _ ( )
Capítulo 2. Desenvolvimento dos jogos 182
211 s e l f . label_24 . r ais e _ ( )
212 s e l f . label_26 . r ais e _ ( )
213 s e l f . label_27 . r ais e _ ( )
214 s e l f . label_28 . r ais e _ ( )
215 s e l f . label_29 . r ais e _ ( )
216 s e l f . label_30 . r ais e _ ( )
217 s e l f . label_31 . r ais e _ ( )
218 s e l f . label_32 . r ais e _ ( )
219 s e l f . label_34 . r ais e _ ( )
220 s e l f . label_35 . r ais e _ ( )
221 s e l f . label_37 . r ais e _ ( )
222 s e l f . label_38 . r ais e _ ( )
223 s e l f . pushButton . ra i se_ ( )
224 s e l f . widget_escondida . ra i se_ ( )
225
226 s e l f . r e t r a n s l a t e U i (MainWindow )
227 s e l f . pushButton . c l i c k e d . c onnect ( s e l f . c e n t r a l w i d g e t . v e r i f i c a r )
228 s e l f . l a b e l . c l i c k . connect ( s e l f . widget_es condida . play_video )
229 s e l f . widget . c l i c k . connect ( s e l f . widget_es condida . play_video )
230 s e l f . h o r i z o n t a l S l i d e r . s l i derMoved . connect ( s e l f . widget_escondi da .
set_position)
231 s e l f . pushButton_2 . c l i c k e d . c o nnect ( MainWindow . c l o s e )
232
233 QMetaObject . connectSlotsByName ( MainWindow)
234 # setupUi
235
236 de f r e t r a n s l a t e U i ( s e l f , MainWindow ) :
237 MainWindow . setWindowTitle ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,
u"MainWindow" , None ) )
238 s e l f . l a b e l _ 2 . s e t T e x t ( "" )
239 s e l f . l ab e l _ 2 5 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :28 pt ;\" >
Desafio : </ span ></p ><p align =\" center \"> <span style =\" font - size :14 pt ;\" >
Descubra o valor da abelha , da flor e do mel </span ></p><p align =\"
center \"> < span style =\" font - size :14 pt ;\" > para de scobrir como \ u00e9
feito o mel </ span ></p></body ></html >" , None ) )
240 s e l f . l ab el _3 . setText ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
font -weight :600;\" >2 </ span ></p ></body > </ html >" , None ) )
241 s e l f . l a b e l _ 4 . s e t T e x t ( "" )
242 s e l f . l ab el _5 . setText ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
font -weight :600;\" >+ </ span ></p ></body > </ html >" , None ) )
243 s e l f . l a b e l _ 6 . s e t T e x t ( "" )
244 s e l f . l ab el _7 . setText ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
font -weight :600;\" >-</span ></p></body ></html >" , None ) )
Capítulo 2. Desenvolvimento dos jogos 183
245 s e l f . l ab el _8 . setText ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
font -weight :600;\" >-</span ></p></body ></html >" , None ) )
246 s e l f . l ab el _9 . setText ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
font -weight :600;\" >= </ span ></p ></body > </ html >" , None ) )
247 s e l f . l ab e l _ 1 0 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
font -weight :600;\" >1 </ span ></p ></body > </ html >" , None ) )
248 s e l f . l ab e l _ 1 1 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
font -weight :600;\" >2 </ span ></p ></body > </ html >" , None ) )
249 s e l f . l ab e l _ 1 2 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
font -weight :600;\" >-</span ></p></body ></html >" , None ) )
250 s e l f . l a b e l _ 1 3 . s e t T e x t ( "" )
251 s e l f . l a b e l _ 1 4 . s e t T e x t ( "" )
252 s e l f . l ab e l _ 1 5 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
font -weight :600;\" >2 </ span ></p ></body > </ html >" , None ) )
253 s e l f . l ab e l _ 1 6 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
font -weight :600;\" >= </ span ></p ></body > </ html >" , None ) )
254 s e l f . l ab e l _ 1 7 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
font -weight :600;\" >-</span ></p></body ></html >" , None ) )
255 s e l f . l ab e l _ 1 8 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
font -weight :600;\" >7 </ span ></p ></body > </ html >" , None ) )
256 s e l f . l a b e l _ 1 9 . s e t T e x t ( "" )
257 s e l f . l ab e l _ 2 0 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
font -weight :600;\" >-</span ></p></body ></html >" , None ) )
258 s e l f . l a b e l _ 2 1 . s e t T e x t ( "" )
259 s e l f . l a b e l _ 2 2 . s e t T e x t ( "" )
260 s e l f . l ab e l _ 2 3 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
font -weight :600;\" >= </ span ></p ></body > </ html >" , None ) )
261 s e l f . l ab e l _ 2 4 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
font -weight :600;\" >-</span ></p></body ></html >" , None ) )
262 s e l f . l a b e l _ 2 6 . s e t T e x t ( "" )
263 s e l f . l ab e l _ 2 7 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
font -weight :600;\" >* </ span ></p ></body > </ html >" , None ) )
264 s e l f . l a b e l _ 2 8 . s e t T e x t ( "" )
265 s e l f . l a b e l _ 2 9 . s e t T e x t ( "" )
Capítulo 2. Desenvolvimento dos jogos 184
266 s e l f . l ab e l _ 3 0 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
font -weight :600;\" >3 </ span ></p ></body > </ html >" , None ) )
267 s e l f . l a b e l _ 3 1 . s e t T e x t ( "" )
268 s e l f . l ab e l _ 3 2 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
font -weight :600;\" >= </ span ></p ></body > </ html >" , None ) )
269 s e l f . l a b e l _ 3 4 . s e t T e x t ( "" )
270 s e l f . l ab e l _ 3 5 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
font -weight :600;\" >= </ span ></p ></body > </ html >" , None ) )
271 s e l f . l a b e l _ 3 7 . s e t T e x t ( "" )
272 s e l f . l ab e l _ 3 8 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
font -weight :600;\" >= </ span ></p ></body > </ html >" , None ) )
273 s e l f . pushButton . s et Te xt ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"
Verificar" , None ) )
274 s e l f . pushButton_2 . setText ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,
u"Fechar" , None ) )
275 s e l f . l a b e l . s e t T e x t ( "" )
276 # r e t r a n s l a t e U i
digo 32 Código da classe Ui_MainWindow criada no QT Designer
2.3.17.1 Criando as classes valores e clicklabel
Na subsecção anterior fora copiado a classe Ui_MainWindow, sendo que não tem
necessidade de mudar, apenas copia-la, nessa subsecção vamos começar a criar às classes
valores e clicklabel, que utilizamos na interface, sendo elas, valores do QLineEdit e clicklabel
da QLabel, na classe valores estamos usando para definir quais caracteres são aceitas nos
editores de texto QLineEdit, para fazer isso precisamos usar um validador de caracteres,
o QRegExp e QRegExpValidator, nesse caso vamos validar apenas dois numeros, então
usamos dentro das aspas, um colchetes para cada casa do texto, e dentro do colchetes
quais os valores aceitos, nesse caso a primeira caso aceita de 1 até 9 e a segunda casa
aceita de 0 até 9, para mais informações pode ser encontradas no site do QT em (QT,l;
QT,k), também vamos alinhar o texto dentro do Qlineedit para o centro, podendo ser
obersavdo com ser feitos no site do QT em (QT,r) ou em outros sites ao pesquisar como
em (INOSíVEL,2019) e na clicklabel fazemos com que a imagem do play possa ser clicada,
como feito na criação do jogo da memoria em ??
, porém vamos pegar apenas a parte de acionar ao clicar.
1#Criando a nova c l a s s e v a l o r e s baseado no QLineEdit , para d e f i n i r um
v a l i d a d o r de t ext o , p ermitindo ap enas e s c r e v e r números de 1 a 99 no
i nput de t e x t o
2class v a l o r e s ( QLineEdit ) :
Capítulo 2. Desenvolvimento dos jogos 185
3#Criando a fun ç ão de i n i c i a l i z a ção , que se executa cada vez que o
programa c r i a uma nova QLineEdit u t i l i z a n d o a c l a s s e v a l o r e s
4de f __init__ ( s e l f , parent=None ) :
5#G ar antindo su a exe cu ç ã o
6super ( ) . __init__ ( p aren t )
7#Def i nindo q ua l é seu v alida dor , u t i l i z a n d o o QRegExpValidator , com o
p r o p r i o o b j e t o e QRegExp pas sa ndo q u a i s s ã o o s p o ss í v e i s c a r a c t e r e s p or
c asa r e p r e s e n t a d o po r [ ] , n e s s e c a so s ó v a l i d a d e duas c a s a s por i s s o
apena s d o i s [ ] , sen do a p r i m e i r a c a s o a c e i t a n d o e n t r e 1 e 9 , o s i n a l de
menos s e r e p r e s e n t a e n t r e o s v a l o r e s , e su a s egu nda c a sa a c e i t a n d o e n t r e
0 e 9
8s e l f . s e t V a l i d a t o r ( QRegExpValidator ( QRegExp( "[1-9][0 -9] " ) , s e l f ) )
9#Def i nindo que os t e x t o s vão e s t a r c e n t r a l i z a d o s ao e s c re v e r
10 s e l f . setAlign m ent ( Qt . AlignCent e r )
11
12
13 #Criando a nova c l a s s e c l i c k l a b e l baseado na QLabel , para a di c i o na r a fun ç ã
o de c l i c k
14 class c l i c k l a b e l ( QLabel ) :
15 #Criand o o s i n a l que f o i c r i a d o no e d i t o r de s i n a i s no QT Desi gn er , é
i mp orta n te t e r o mesmo nome , n e s s e c a so c l i c k .
16 c l i c k = S i g n a l ( )
17 #Mudando a f un ç ã o padr ã o do c l i c k do mouse , par a f a z e r a l g o e x t r a .
18 de f mousePressEvent ( s e l f , e v ent ) :
19 #Adicionando que apó s c l i c a r com o mouse e l e emita o s i n a l c l i c k .
20 s e l f . c l i c k . emit ( )
digo 33 Criando classe especial valores, e a classe especial clicklabel
2.3.18 Criando a classe widget_principal
Na subsecção anterior fora criado a classe valores e clicklabel, nessa subsecção
vamos criar a classe classe especial widget_principal do QWidget onde se faz a verificação
se os valores estão corretos, e caso não esteja deixe a borda vermelha e foca no errado,
e caso seja correta, deixe a borda verde e trave para não poder ser mudado, para isso
vamos começar criando algumas variáveis como na subsecção 2.2.8.7, para armazenar quais
respostas então corretas, e criando uma função para fazer sua verificação, pegando seus
filhos com os nomes específicos como na subsecção 2.2.8.7, os quais verificaremos se o valor
escrito está correto, no caso da abelha se é número 3, caso seja seta a variável abelha para
verdadeiro, e muda a borda do texto para verde, mudando seu stylesheet podendo ser
verificado no site do QT em (QT,q) ou fazer uma pesquisa para o caso especifico como
por exemplo em (ALPHANUMERIC,2014), porém nesse caso nos vamos apenas adicionar
a cor da borda, definindo o stylesheet com a fonte primeiro com e depois adicionando o
estilo da borda após o ponto e virgula( ; ) como na subsecção 2.3.10.1, tendo mudado
Capítulo 2. Desenvolvimento dos jogos 186
seu estilo vamos travar a edição do texto mudando de habilitado para falso, caso o valor
seja diferente de três se foca no editor de texto usando o setFocus() e mudamos a cor da
borda para vermelho, depois se repete para a flor e o pote de mel, com seus valores 9 e 27
respetivamente, depois das verificações fazemos mais uma verificação se todos os valores
estão corretos, caso estejam criamos uma mensagem como na subsecção 2.2.11, criamos
seu titulo como Parabéns, e o texto como Parabéns os valores estão certos. Continue agora
com o vídeo : Produzindo mel, o qual depois vamos mudar sua formatação na próxima
subsecção, e definimos o botão como OK e que por padrão vai acionar o botão OK, e
por fim verificamos se o botão OK fora acionado para achar o filho da widget que está
escondido mudando para falso, o tornando visível.
1#Criand o a nova c l a s s e w i d g e t _ p r i n c i p a l ba se ado na QWidget , onde s e f a z a
v e r i f i c a ç ão se os v a l o r e s e st ão ce rt o s , e caso e s t e j a mostre um mensagem
, e cada v a l o r c o r r e t o f i q u e com bord a v erde , e o s e r r a d o s com bo rda
ve rmelha e f oque n e l e .
2class widget_principal(QWidget) :
3#Criando a fun ç ão de i n i c i a l i z a ção , que se executa cada vez que o
programa c r i a um novo w i dg et u t i l i z a n d o a c l a s s e w i d g e t _ p r i n c i p a l
4de f __init__ ( s e l f , parent=None ) :
5#G ar antindo su a exe cu ç ã o
6super ( ) . __init__ ( p aren t )
7#Criando as v a r i á v e i s de v e r i f i c a ç ão s e o v a l o r e s e st ão c o r r e t o s ou não
, por padr ão va i c r i a r como f a l s o , para abelha , f l o r e mel
8s e l f . abelha = Fa l se
9s e l f . f l o r = Fa l se
10 s e l f . mel = Fa l se
11
12 #Cr ia ç ão dos s l o t s , os r e c e p t o r e s do s i n a l c l i c k ed , para i s s o sempre a
fun ç ão tem que t e r o nome do s l o t , d e f i n i d o no QT D esigner , e s e r
d e f i n i d o @ sl ot ( ) a ntes da fun ç ão
13 @Slot ( )
14 de f v e r i f i c a r ( s e l f ) :
15 #Aqui nó s pegamos o QLineEdit e armazenamos na v a r i á vel , para i s s o
vamos u sar o f i n d c h i l d , passando o t i p o QLineEdit e o nome d ele , por
i s s o que é i mpo rtan te t e r mudado s eu nome no QT D es ig ner , p o i s no w id ge t
p o s s u i 3 d i f e r e n t e s , que é ne ce s s á r i o e s p e c i f i c á l o s
16 #Criando as v a r i á v e i s possuindo o nome do QLineEdit , para f i c a r mais f á
c i l sua i d e n t i f i c a ç ão enquanto se t r a b al h a com e l a s
17 v al or_abelha = s e l f . f i n d C h i l d ( QLineEdit , "valor_abelha")
18 v a l o r _ f l o r = s e l f . f i n d C h i l d ( QLineEdit , "valor_flor")
19 va lor_mel = s e l f . f i n d C h i l d ( QLineEdit , " valor_mel" )
20
21 #Aqui v e r i f i c a m o s s e o t e xt o do valor_ab elha c ond iz com o número da
abelha , 3 , para i s s o usamos a fun ç ão d i spla y Text ( ) do QLineEdit e
comparamos com o v a l o r 3 em forma de t e x t o " 3 "
22 i f ( valor_a belha . d i spla yTex t ( ) == "3") :
Capítulo 2. Desenvolvimento dos jogos 187
23 #Se o v a l o r f o r 3 , d e f i n i m o s que o v a l o r da a b elha e s t á c o r r e t o ,
passando para a v a r i a v e l a be lh a o va l or True
24 s e l f . abelha = True
25 #Aqui d ef in i mo s o e s t i l o da QLineEdit chamada valor_abelha , mantendo
o t i p o de f onte , e a d ici on a n do uma borda s ó l i d a verde , de 1 p i x e l , com
border : 1px s o l i d green ;
26 valor_abelh a . s e t S t y l e S h e e t ( u"font: 87 40pt \" A r i a l \";border: 1px
solid green;" )
27 #Aqui d e f i n i m o s que a QL in eEdit chamada val o r_ ab elh a , nã o e s t á ma is
h a b i l it a d a para e s c r i t a , travando e l a
28 valor_abelh a . s e tEnabled ( F a ls e )
29 #Aqui v e r i f i c a m o s s e todas as o u tra s v e r i f i c a ç õ e s falharam , resumindo o
v a l o r não e r á 3
30 e l s e :
31 #Se o v a l or e ra d i f e r e n t e de 3 , f o ca na QLineEdit chamada
valor_abelha
32 valor_abelh a . set Fo cus ( )
33 #Aqui d ef in i mo s o e s t i l o da QLineEdit chamada valor_abelha , mantendo
o t i p o de f onte , e a d ici on a n do uma borda s ó l i d a vermelha , de 1 p i x e l ,
com b o r der : 1px s o l i d red ;
34 valor_abelh a . s e t S t y l e S h e e t ( u"font: 87 40pt \" A r i a l \";border: 1px
solid red;" )
35
36 #Aqui r e petim o s a v e r i f i c a ç ão que f o i f e i t a para a abelha , mudando para
f l o r , e s e o v a l o r é 9 .
37 #Aqui v e r i f i c a m o s s e o t e xt o do v a l o r _ f l o r c on diz com o número da f l o r ,
9 , para i s s o usamos a fun ç ão d i s playT e x t ( ) do QLineEdit e comparamos
com o v a l o r 9 em f orm a de t e x t o " 9 "
38 i f ( v a l o r _ f l o r . d i spla yTex t ( ) == "9") :
39 #Se o v a l o r f o r 9 , d e f i n i m o s que o v a l o r da f l o r e s t á c o r r e t o ,
passando para a v a r i a v e l f l o r o v al or True
40 s e l f . f l o r = True
41 #Aqui d e f i n i m o s o e s t i l o da QLineEdit chamada v a l o r _ f l o r , mantendo o
t i p o de f onte , e a d icio nando uma borda s ó l i d a v erde , de 1 p i x e l , com
border : 1px s o l i d green ;
42 v a l o r _ f l o r . s e t S t y l e S h e e t ( u"font : 87 40pt \" A r i a l \";border: 1px solid
green;" )
43 #Aqui d e f i n i m o s que a QLineEdit chamada v a l o r _ f l o r , nã o e s t á mais
h a b i l it a d a para e s c r i t a , travando e l a
44 v a l o r _ f l o r . setEnabled ( Fa lse )
45 #Aqui v e r i f i c a m o s s e todas as o u tra s v e r i f i c a ç õ e s falharam , resumindo o
v a l o r não e r á 9
46 e l s e :
47 #Se o v a l or e ra d i f e r e n t e de 9 , f o ca na QLineEdit chamada v al o r_ f lo r
48 v a l o r _ f l o r . s etFocus ( )
49 #Aqui d e f i n i m o s o e s t i l o da QLineEdit chamada v a l o r _ f l o r , mantendo o
t i p o de f onte , e a d icio nando uma borda s ó l i d a ver melha , de 1 p i x e l , com
Capítulo 2. Desenvolvimento dos jogos 188
border : 1px s o l i d re d ;
50 v a l o r _ f l o r . s e t S t y l e S h e e t ( u"font : 87 40pt \" A r i a l \";border: 1px solid
red;" )
51
52 #Aqui r e petim o s a v e r i f i c a ç ão que f o i f e i t a para a abelha , mudando para
mel , e s e o v a l o r é 2 7 .
53 #Aqui v e r i f i c a m o s s e o t e xt o do valor_mel c on diz com o número da mel ,
27 , para i s s o usamos a fun ç ão d i spla y Text ( ) do QLineEdit e comparamos
com o v a l o r 27 em forma de t e x t o " 2 7 "
54 i f ( valor_mel . d isp layT ext ( ) == "27" ) :
55 #Se o v a l o r f o r 27 , d e f i n i m o s que o v a l o r da mel e s t á c o r r e t o ,
passando para a v a r i a v e l mel o v a lo r True
56 s e l f . mel = True
57 #Aqui d ef in i mo s o e s t i l o da QLineEdit chamada valor_mel , mantendo o
t i p o de f onte , e a d icio nando uma borda s ó l i d a v erde , de 1 p i x e l , com
border : 1px s o l i d green ;
58 valor_mel . s e t S t y l e S h e e t ( u"font : 87 40pt \" A r i a l \";border: 1px solid
green;" )
59 #Aqui d e f i n i m o s que a QL in eEdit chamada va lo r_mel , nã o e s t á mai s
h a b i l it a d a para e s c r i t a , travando e l a
60 valor_mel . setEnabled ( Fal s e )
61 #Aqui v e r i f i c a m o s s e todas as o u tra s v e r i f i c a ç õ e s falharam , resumindo o
v a l o r não e r á 27
62 e l s e :
63 #Se o v a l or e ra d i f e r e n t e de 27 , f oc a na QLineEdit chamada valor_mel
64 valor_mel . s etFoc us ( )
65 #Aqui d ef in i mo s o e s t i l o da QLineEdit chamada valor_mel , mantendo o
t i p o de f onte , e a d icio nando uma borda s ó l i d a ver melha , de 1 p i x e l , com
border : 1px s o l i d re d ;
66 valor_mel . s e t S t y l e S h e e t ( u"font : 87 40pt \" A r i a l \";border: 1px solid
red;" )
67
68 #Aqui v e r i f i c a m o s s e todos os v a l o r e s e s t ão c e rt os , v e r i f i c a n d o as v a r i
á v e i s a belh a , f l o r e mel s ã o v e r d a d e i r a s .
69 i f ( s e l f . a b e lha and s e l f . f l o r and s e l f . mel ) :
70 #Caso s e j a vamos c r i a r um popup de mensagem
71 msgBox = QMessageBox ( )
72 #Aqui d e f i n i m o s o t í t u l o do popup de mensagem
73 msgBox . setWi ndowTitle ( u"Parab éns" )
74 #Aqui d e f i n i m o s q ua l a mensagem do popup de mensagem Parab é n s os
v a l o r e s e st ão c e r t o s . Continue agor a com o v í deo : Produzindo mel , mais
pa ra f i c a r com i nden ta ç ão , l e t r a gran de e nt r e o ut ra s c o i s a s , s e u t i l i z a
o QT D esigner para d e f i n i r seu e s t i l o , c r ian d o uma l ab e l , e apertando
change r i c h te xt , e s cr eve ndo e dei xando como desejado , d e p o i s s ó c o p i a r
o campo t ex t , no e d i t o r de pr op ried ades , onde t er á s um c ó digo enorme ,
come ç ando com <html>
75 msgBox . s etText ( uParabéns os valores estão certos. Continue agora com
Capítulo 2. Desenvolvimento dos jogos 189
o vídeo : Produzindo mel )
76 #Aqui d e f i n i m o s q ua l o bo t ão do popup de mensagem , n e s s e c a so um bo t ã
o OK
77 msgBox . s e tSt a ndardBu t tons ( QMessageBox . Ok)
78 #Aqui d e f i n i m o s q ua l o bo t ão do popup de mensagem é o pad r ão , p ara
c as o a p e r t e ESC, Ent er , Spa ce no t e c l a d o , a c i o n e o bot ã o
79 msgBox . s e t De f au lt B ut to n ( QMessageBox . Ok)
80 #Aqui v e r i f i c a m o s s e a mensagem f o i executada , no c aso acionad o algum
bot ão
81 r e t = msgBox . exec_ ( )
82 #Aqui v e r i f i c a m o s s e o bot ão a cion ado f o i Ok
83 i f r e t == QMessageBox . Ok :
84 #Caso tenha s i d o s e l e c i o n a d o Ok, s e p roc ura o f i l h o QWidget da
c l a s s e es condida , como e l e tem mais de um f i l h o QWidget , é i mportant e
t e r nomeado o wid get p ara w id ge t_ es co nd id a , ap ó s a cha r d e f i n i m o s que e l e
não é mais ocu l t a , aparecendo na t e l a
85 s e l f . f i n d C h i l d ( QWidget , u" widget_escondida " ) . setHidden ( F a lse )
digo 34
Criando a classe especial widget_principal, onde se faz as verificações se os
valores estão corretos
2.3.18.1 Criando o texto formatado
Na subsecção anterior criamos a classe especial do widget_principal, onde se faz as
verificações se os valores estão corretos, e caso estejam abre uma mensagem de parabéns
antes de começar o vídeo da produção de mel, nessa subsecção vamos verificar a criação
do texto especial para a mensagebox criado na subsecção anterior, abrindo o QT Designer
e criando uma nova interface e adicionando uma label, para mudar seu texto formatado,
usando o change rich text, 149, para definir seu estilo nesse caso usada tamanho 20 para a
primeira e segunda linha, e tamanho 28 para a terceira linha, deixando a pontuação do
final da primeira linha e segunda em negrito, juntamente com a terceira linha inteira em
negrito, 150, com todo o texto centralizado, ao confirmar, no editor de propriedades, na
aba QLabel, em seu primeiro campo, text, ficou um digo, sobre o texto que acabamos
de criar, 151, copiamos o digo para adicionar na mensagebox.
Capítulo 2. Desenvolvimento dos jogos 190
Figura 149
Criando novo aplicativo, com uma label e selecionando para criar um texto
formatado
Figura 150
Definindo o texto formatado a ser usado na caixa de mensagem, com sua for-
matação centralizada com tamanho 20 nas duas primeiras linhas, pontuação
em negrito e sua terceira linha inteira em negrito com tamanho 28
Capítulo 2. Desenvolvimento dos jogos 191
Figura 151 Copiando o digo HTML, gerado pela formatação do texto
2.3.18.2 Arrumando o msgBox.setText() para o texto formatado
Na subsecção anterior fora criado o texto especial formatado, nessa subsecção
vamos pegar o digo 35 em HTML gerado pela QT Designer, para ficar mais visível
pode se indentar as linhas deixando parecido com o codigo 36, tendo o código 35 vamos
inserir no msgBox.setText() usando u antes para definir que vai ser unicode e usando
aspas simples, pois o código vem escrito com aspas duplas, substituindo o código 37 pelo
digo 38 onde está com o formato correto, depois de ter copiado o digo HTML gerado
no QT Designer e arrumado o digo 34, fechar o QT Designer, não é necessário salvar,
pois a única coisa que precisávamos era converter o texto para código HTML.
1<html><head/><body><p a l i g n="center"><span s t y l e=" font - size :20 pt ;">Parabé
ns os v a l o r e s es t ão c e r t o s </span><span s t y l e=" font - size :20 pt; font -
weight :600; "> !</ span><span s t y l e=" font - size :20 pt ;"> Continue agor a com
o v í deo </ span><span s t y l e=" font - size :20 pt; font - weight :600; ">:</ span><
/p><p a l i g n="center"><span s t y l e=" font - size :28 pt ; font - weight :600; ">
Pr oduzindo mel</ span></p></body></ html>
digo 35
digo HTML gerado, na aba de text após confirmar a formatação do texto
no QT Designer, conforme imagem 151
1<html>
2<head/>
3<body>
4<p a l i g n=" center ">
5<span s t y l e=" font - size :20 pt ;">
Capítulo 2. Desenvolvimento dos jogos 192
6Parab é ns os v a l o r e s e st ã o c e r t o s
7</ span>
8<span s t y l e=" font - size :20 pt ; font - weight :600; ">
9!
10 </ span>
11 <span s t y l e=" font - size :20 pt ;">
12 Continue agor a com o v í deo
13 </ span>
14 <span s t y l e=" font - size :20 pt ; font - weight :600; ">
15 :
16 </ span>
17 </p>
18 <p a l i g n=" center ">
19 <span s t y l e=" font - size :28 pt ; font - weight :600; ">
20 Produzindo mel
21 </ span>
22 </p>
23 </body>
24 </html>
digo 36 Código 35, após realizar a indentação das linhas
1msgBox . s etText ( uParabéns os valores estão certos. Continue agora com o ví
deo : Produzindo mel )
digo 37 Linha 75 do código 34 a ser mudada pelo digo 35
1msgBox . s etText ( u<html ><head /><body ><p align =" center "><span style =" font -
size :20 pt;">Parabéns os valores estão certos </span ><span style =" font -
size :20 pt ; font - weight :600;" >! </ span >< span style =" font - size :20 pt ;">
Continue agora com o ví deo </span ><span style =" font - size :20 pt; font -
weight :600;" >: </ span ></p><p align ="center ">< span style =" font -size :28 pt;
font -weight :600;" >Produzindo mel </span ></p></body ></html >)
digo 38
Visualização de como deve ficar a linha 75 do digo 34 após ter seu conteúdo
mudado pelo digo 35
2.3.19 Criando as classes especiais
media_slider do QSlider, e por fim o vídeo da QWidget onde se vai rodar o vídeo,
porém vamos baseá-lo no QVideoWidget, ao invés do QWidget„
2.3.20 Criando a classe escondido
Na subsecção anterior fora arrumado a mensagem para ficar com a formatação
correta, nessa subsecção vamos criar a classe escondido referente ao player de vídeo,
Capítulo 2. Desenvolvimento dos jogos 193
sendo a classe escondido do QWidget onde fica escondido até a verificação dos valores
estarem certas, e receber o comando para se tornar visível da widget_principal, como foi
utilizado no jogo da memoria no digo 24, para criação do vídeo temos varias opções
ao se pesquisar desde maneiras simples como em (DENLORD,2018), até outros mais
complexos com seleção de vídeo do computador encontrado em (PARK,2017), até outras
bibliotecas para tocar vídeos o QGraphicsView, que permite trabalhar com a label de
reprodução de vídeo, tendo como exemplo de sua utilização em (FBENCE,2017),porém é
mais pesado e lerdo que o QMediaPlayer, podendo se verificar sua comparação no fórum
do QT em (ZAHI.MASHAEL,2017), por esse motivo fora escolhido trabalhar com o
QMediaPlayer, pegando como base para a criação a explicação encontrada no site do
QT em (QT,g) e no site encontrado sobre como criar um tocador de media no PyQt5
em (FOROGH, ), com a barra de andamento que pode ser mudada, e pausar o vídeo
a qualquer momento, caso queira colocar ao invez de poder mudar o andamenteo do
video arrastando a barra, para que vá ao local clicado na barra de andamente, pode ser
encontrado um exemplo em (EAMONN,2018), agora voltando ao digo, vamos começar
definindo que a widget vai estar escondida, e começamos a criar o vídeo, definindo o media
player, o local do video, e que o video a ser executado se encontra no local do video, e caso
o estado do video mude, vai acionar a função mediastate_changed, criando um link direto
no digo, depois usamos o digo de pintura usado na criação do jogo de memoria, que
serve para que a cor de fundo funcione, e começamos a criar as funções referente a execução
do vídeo, play_video que serve para começar ou para o video, fazendo uma verificação
se está tocando pare e caso contrario começe a tocar, proxima é o mediastate_changed,
que executa toda vez que o estado do video mudar, sendo primeiro se o video começar a
tocar vai fazer a imagem de play ficar escondida, para não ficar na frente do video, e caso
o video esteja sem tocar ainda, no caso terminou ou não apertou play ainda, vai tornar a
imagem de play visivel, e por ultimo uma função que seta a posição do vídeo.
1#Criando a nova c l a s s e escond i d o baseado no QWidget , para torn ál o i n v i s í
v e l e a d i c i o n a r o p l a y e r de v í deo .
2class e sco ndid o ( QWidget ) :
3#Criando a fun ç ão de i n i c i a l i z a ção , que se executa cada vez que o
programa c r i a um novo widget u t i l i z a n d o a c l a s s e e scondi d o
4de f __init__ ( s e l f , parent=None ) :
5#G ar antindo su a exe cu ç ã o
6super ( ) . __init__ ( p aren t )
7#Aqui e stamos d e f i n i n d o que a w id ge t e sco ndido é para e s t a r es con dida ,
para i s s o usamos a fun ç ão setHidden passando o par âmetro True , para que
quando f o r c r i a d o a t e l a e s t e j a e sco ndi da
8s e l f . setHidden ( True )
9#Aqui c ri a mo s um p l a y e r de v í deo , usando o QMediaPlayer , como um
componente da c l a s s e e s c ondido
10 s e l f . mediaPlayer = QMediaPlayer ( None , QMediaPlayer . V i d e oSurface )
11 #Aqui criamos uma v a r i a v e l para armazenar o caminho do video , usando a
Capítulo 2. Desenvolvimento dos jogos 194
fun ç ã o r es o ur ce_p a th ( ) que cria m os no come ç o do arq uiv o , para p eg ar o
caminho r e l a t i v o , que f u n c i o n e p ara c r i a ç ão de e x ec ut á v e i s ou como c ó
digo normal
12 l o c a l _ v i d e o = reso urce_ path ( u" video/mel.avi" )
13 #Aqui d e f i ni mo s q ual v a i s e r o v í deo , usando QMediaContent , e d e f i n i n d o
que é l o c a l com QUrl . f r o m L o c a l F i l e e p as sand o como p ar â metro o caminho
armazenado na v a r i a v e l l oc al_ vid eo , c r i a d a a n te ri orm en te
14 s e l f . m ed ia Pl ay er . s et Med ia ( QMediaContent ( QUrl . f r o m L o c a l F i l e ( l o c a l _ v i d e o )
) )
15 #Aqui c ri a mo s um l i n k p ar a o p l a y e r de v í deo , para c a so o e s t a do mude
um s i n a l chamado stateChanged , a c i on e que o e stado mudou , um r e c e p t o r
me di ast at e_c ha nge d , c r i a d o na pr ó p r i a c l a s s e
16 s e l f . mediaPlayer . stateChanged . c o n n ect ( s e l f . mediastate_changed )
17
18 #Essa fun ç ão mo d if i ca o e f e i t o de pintu r a , p o i s widgets promovidas não
ace ita m pl ano de fundo , por i s s o p r e c i s a s e mudar s ua fun ç ã o n ati v a , não
p re ci sa ndo mexer , tendo em vá r i o s l u g a r e s seu c ó d ig o pron to .
19 de f p aintE vent ( s e l f , pe ) :
20 o = QStyleOption ()
21 o . init From ( s e l f )
22 p = QPainter ( s e l f )
23 s e l f . s t y l e ( ) . drawPrimitive ( QStyle . PE_Widget , o , p , s e l f )
24
25 #Criando fun ção play_video , para d e f i n i r se o v í deo e s t á tocando ou
parado , mudando seu comportamento
26 de f play_video ( s e l f ) :
27 #V e r i f i c a se o es t ado do vid e o e st á tocando
28 i f s e l f . mediaPlayer . s t a t e ( ) == QMediaPlayer . P lay ing Sta te :
29 #Caso o v í deo e s t e j a tocando , mudamos seu e stado para parado usando a
fun ç ã o p ause ( )
30 s e l f . mediaPlayer . pause ( )
31 #Aqui v e r i f i c a m o s s e todas as o u tra s v e r i f i c a ç õ e s falharam , resumindo
s e o e sta do do v ideo não e s t á tocando
32 e l s e :
33 #Caso o v í deo não e s t e j a tocando , mudamos seu est a d o para tocando
usando a fu n ç ã o p lay ( )
34 s e l f . mediaPlayer . play ( )
35
36 #Criando a fun ção para v e r i f i c a ç ão s e e st á tocando o v í deo , ou e st á
desativado
37 de f mediastate_changed ( self , state ) :
38 #Aqui s e v e r i f i c a s e o esta d o do vid e o e s t á tocando
39 i f s e l f . mediaPlayer . s t a t e ( ) == QMediaPlayer . P lay ing Sta te :
40 #Caso e s t e j a t oc an do , d e f i n i m o s que a imagem do p lay f i c a
tr ansp a rent e , para não f i c a r na f r e n t e do v í deo
41 s e l f . f in dC h i l d ( c l i c k l a b e l ) . setH idden ( True )
42 #Aqui s e v e r i f i c a s e o e s t a do do v i d e o e s t á d e s l i g a d o , c aso a o u tr a
Capítulo 2. Desenvolvimento dos jogos 195
v e r i f i c a ç ão tenha fa l ha d o
43 elif s e l f . mediaPlayer . s t a t e ( ) == QMediaPlayer . Stop pe dState :
44 #Caso e s t e j a d e s l i g a d o , d e f i n i m o s que a imagem do p lay f i c a v i s í v el ,
para f i c a r na f r e n t e do v í deo , apagado a imagem do bot ão play
45 s e l f . f in dC h i l d ( c l i c k l a b e l ) . setH idden ( Fa l se )
46
47 #Criando a fun ç ão que d e f i n e a p o si ç ão do v í deo
48 de f s e t _ p o s i t i o n ( s e l f , p o s i t i o n ) :
49 #D efin indo a p o s i ç ã o do v í deo
50 s e l f . mediaPlayer . s e t P o s i t i o n ( p o s i t i o n )
digo 39
Criando a classe especial escondido, Criando em seu inicializa-dor o tocador
de vídeo e definindo que não é visível, Criando a função de repintar, criando
as funções play_video, mediastate_changed e set_position
2.3.21 Criando as classes media_slider e video
Na subsecção anterior fora criado a classe escondido, nessa subsecção vamos criar
as classes video para onde o vídeo vai tocar e a classe media_slider, que vai ser a barra do
vídeo, e depois vamos linkar eles com o media player, pois o programa cria os componentes
pela sequência, portanto vai criar a widget escondido primeiro, e depois criar a clicklabel, o
botão fechar, o vídeo, e a barra, por esse motivo vamos criar seus links ao criar os seu filhos,
passando seu parente escondido, na função de inicialização, como feito anteriormente na
subsecção 2.2.8.7, começando com a criação do slider, que assim que for criado vamos criar
os links entre o mediaplayer de seu parente escondido com as funções position_changed e
duration_changed, e criar as funções que vão definir os valores recebidos para a barra de
andamento, ao mover a barra e mudar o local do vídeo fora criado ao fazer o link entre
sliderMoved() e set_position do widget escondido, e a outra classe a ser criada é o video
que ao invez de ser baseado numa QWidget se baseia no QVideoWidget, que simplesmente
vai definir que a classe video vai ser onde o video de seu parente escondido no mediaplayer
vai tocar, tornando a widget video no reprodutor do vídeo, e muda a função de click
do mouse como na clicklabel, para parar ou tocar o vídeo, sendo esses links criados na
subsecção 2.3.13.
1#Criando a nova c l a s s e m ed ia _s li de r baseado na QSli der , para mudar sua p o si
ç ão co nfor me o v í deo t o ca
2class media_slider(QSlider) :
3#Criando a fun ç ão de i n i c i a l i z a ção , que se executa cada vez que o
programa c r i a um novo s l i d e r u t i l i z a n d o a c l a s s e media_s lider , e
d e f i n i n d o que s eu paren te é um QWidget , n e ss e caso a c l a s s e e sco ndid o
4de f __init__ ( s e l f , parent=QWidget ) :
5#G ar antindo su a exe cu ç ã o
6super ( ) . __init__ ( p aren t )
Capítulo 2. Desenvolvimento dos jogos 196
7#Aqui s e l i n k a todas as v e z e s que mudar a p o s i ç ão do p l a y e r de v í deo
com a p o s i ç ão do s l i d e r , lin kand o o p ar en t e com a pr ó p r ia , p o i s ao c r i a r
o pare n t e escond ido , o s l i d e r a inda não e x is t e , ocasionando er ro c a s o
t ent e l i n k á l os , tendo ent ão que l i n k a r o p arente com o s l i d e r na c r i a ç ã
o do s l i d e r
8s e l f . parent ( ) . mediaPlayer . positi o nChanged . connect ( s e l f . position_chan g e d
)
9#Aqui s e l i n k a todas as v e z e s que mudar a dura ç ã o do p l a y e r de v í deo
com a dura ção do s l i d e r
10 s e l f . parent ( ) . mediaPlayer . durationChanged . connect ( s e l f . duration_changed
)
11
12 #Aqui criamos o r e c e p t o r positi on_chan ged par a mudar a p o s i ç ã o da bar ra ,
conforme o v í deo toca
13 @Slot ( )
14 de f p os it io n_ ch an ge d ( s e l f , p o s i t i o n ) :
15 #aqui d e f i n i m o s sua nova p o s i ç ão
16 s e l f . setV alue ( p o s i t i o n )
17
18 #Aqui criamos o r e c e p t o r d uration_changed pa ra mudar a dura ç ão co nforme o
v í deo toca
19 @Slot ( )
20 de f duration_changed ( s e l f , dura t ion ) :
21 #aqui d e f i n i m o s sua nova dur a ç ã o
22 s e l f . setRange ( 0 , d urat i on )
23
24 #Criando a nova c l a s s e v ideo baseado na QVideoWidget , para mudar rodar o
video
25 class vide o ( QVideoWidget ) :
26 #Criando a fun ç ão de i n i c i a l i z a ção , que se executa cada vez que o
programa c r i a um novo QVideoWidget u t i l i z a n d o a c l a s s e video , e
d e f i n i n d o que s eu paren te é um QWidget , n e ss e caso a c l a s s e e sco ndid o
27 de f __init__ ( s e l f , parent=QWidget ) :
28 #G ar antindo su a exe cu ç ã o
29 super ( ) . __init__ ( p aren t )
30 #Aqui d e f i n i m o s que o l o c a l onde o v í deo v a i t o c a r v a i s e r e s s a l a b e l ,
d e f i n i n d o em seu p arent e no med iapla ye r , tendo que s e r f e i t o na
i n i c i a l i z a ç ão da c l a s s e video , po i s ao paren t e es c ondid o s e r c riado , a
wid get v i d eo ainda não f o i cr i a d o , por i s s o tem que d e f i n i r e la durante
a c r i a ç ão da c l a s s e v ideo
31 s e l f . parent ( ) . mediaPlayer . setVideoOutput ( s e l f )
32
33 #Criand o o s i n a l que f o i c r i a d o no e d i t o r de s i n a i s no QT Desi gn er , é
i mp orta n te t e r o mesmo nome , n e s s e c a so c l i c k .
34 c l i c k = S i g n a l ( )
35 #Mudando a f un ç ã o padr ã o do c l i c k do mouse , par a f a z e r a l g o e x t r a .
36 de f mousePressEvent ( s e l f , e v ent ) :
Capítulo 2. Desenvolvimento dos jogos 197
37 #Adicionando que apó s c l i c a r com o mouse e l e emita o s i n a l c l i c k , que
f o i l i n k a d o com p la y_ vid eo ( ) no QT D e s igne r
38 s e l f . c l i c k . emit ( )
digo 40
Criando as classes media_slider e video, fazendo o link entre eles e o video
player encontrado na widget escondido
2.3.22 Criando o MainWindows e a inicialização do programa
Na subsecção anterior fora finalizado as classes especiais para a execução do vídeo,
nessa subsecção vamos criar sua janela principal e sua inicialização, como feito no jogo da
memória em 2.2.8.5.
1#Tendo c r i ad o tudo , vamos c r i a r a j a n e l a p r i n c i p a l , u t i l i z a n d o a i n t e r f a c e
c r i a d a no QT De sig ne r , como f e i t o pa ra o j o go da me r i a
2class MainWindow(QMainWindow , Ui_MainWindow) :
3#Funç ão de i n i c i a l i z a ç ão
4de f __init__ ( s e l f ) :
5#G ar antindo su a exe cu ç ã o
6super(MainWindow , s e l f ) . __init__ ( )
7#Adicionando a i n t e r f a c e
8s e l f . setup Ui ( s e l f )
9#Mostrando a i n t e r f a c e
10 s e l f . show ( )
11
12 #Começ o da a p l i c a ç ão , d e f i n i n d o seu i n í c i o p r i n c i p a l
13 i f __name__ == __main__ :
14 #Defi n e a c r i a ç ão do a p l i c a t i v o
15 app = QApplicat ion ( sys . argv )
16 #Adicionando a j a n e l a p r i n c i p a l para o a p l i c a t i v o
17 mainWin = MainWindow ( )
18 #Executando o a p l i c a t i v o
19 r e t = app . exec_ ( )
20 #Terminando o programa
21 sy s . e x i t ( )
digo 41 Python
2.3.23 Visualização do jogo de álgebra linear funcionando
Na subsecção anterior finalizamos o digo do aplicativo.py, nessa subsecção vamos
ver como vai ser antecipadamente apertando F5 no Geany, como fora utilizado para
a verificação no jogo da memoria, na subsecção 2.2.12, podendo verificar se está tudo
funcionando, podendo verificar o começo do jogo na figura 152, na figura 153 podemos
observar como ficaria ao escrever o valor correto da abelha e mel e o valor da flor errado,
Capítulo 2. Desenvolvimento dos jogos 198
na figura 154 pode se ver a mensagem ao acertar todos os valores, na figura 155 se encontra
a imagem da widget escondido esperando para começar a tocar o vídeo, na figura 156 se
tem o começo do vídeo após inicia-lo.
Figura 152 Visualização do jogo finalizado
Figura 153
Visualização das respostas corretas em verde e desabilitadas, e a resposta
errada em vermelho
Capítulo 2. Desenvolvimento dos jogos 199
Figura 154
Visualização da mensagem após responder todos os três valores corretamente
Figura 155
Visualização da interface com o vídeo antes de clicar com o mousse para
começar a tocar
Capítulo 2. Desenvolvimento dos jogos 200
Figura 156 Visualização do vídeo em andamento
2.3.24 Arrumando últimos detalhes para criação do executável
Na subsecção anterior fora verificado o jogo funcionando em sua totalidade, nessa
subsecção vamos arrumar os ultimos detalhes do digo arrumando seus imports generali-
zados para apenas o necessário como foi feito para o jogo da memória, para isso vamos
remover os imports onde tem * e executar o programa, porém podemos aproveitar os
importes do jogo da memória no código 25 removendo apenas QEventLoop e QTimer do
PySide2.QtCore e o QCursor do PySide2.QtGui, ficando conforme o digo 42, para verifi-
car o que está faltando e comparar em qual biblioteca se encontra, sendo elas, encontradas,
em (QT,a;QT,b;QT,c;QT,d), após verificar e adicionar os import faltantes, como
feito na criação do jogo da memoria na subsecção 2.2.12, ao arrumar os importes, o código
de importes deve ficar conforme o digo 43, agora tendo o digo completo deve ficar
conforme o digo 44.
1from PySide2 . QtGui import QPixmap , Qt , QPainter
2from PySide2 . QtWidgets import QMainWindow , QPushButton , QLabel , QWidget ,
QApplication , QStyleOption , QStyle , QMessageBox
3from PySide2 . QtCore import QRect , Signal , Slot , QCoreApplication ,
QMetaObject
4
5from PySide2 . QtMultimediaWidgets import QVideoWidget
digo 42
Cópia dos importes encontrados no jogo da memoria no digo 25,
removendo os importes não necessários, sendo eles QEventLoop e QTimer do
Capítulo 2. Desenvolvimento dos jogos 201
PySide2.QtCore e o QCursor do PySide2.QtGui
1#Importando os o b j e t o s do PySide2 u t i l i z a d o s no programa
2from PySide2 . QtGui import QPixmap , Qt , QPainter , QRegExpValidator
3from PySide2 . QtWidgets import QMainWindow , QPushButton , QLabel , QWidget ,
QApplication , QStyleOption , QStyle , QMessageBox , QLineEdit , QS l i d er
4from PySide2 . QtCore import QRect , Signal , Slot , QCoreApplication ,
QMetaObject , QRegExp , QUrl
5
6#Importando os o b j e t o s do PySide2 u t i l i z a d o s para reprodu ç ão de v í deo
7from PySide2 . QtMultimediaWidgets import QVideoWidget
8from PySide2 . QtMultimedia import QMediaPlayer , QMediaContent
digo 43 Alteração dos importes generalizados para apenas os necessários
1# coding : u t f 8
2#Imp ortando o s i s t e m a e o s i s t e m a o p e r a c i o n a l , a l i n h a de cima d e f i n e o
t i p o de c ó d i go a s e r usado no python , o hashtag (#) é u t i l i z a d o para
d e f i n i r coment á r i o s .
3import sys , os
4#Importando as imagens do qrc , que foram c o n v e r t i d a s para o a rqui vo
r e c u r s o s . py .
5import r e c u r s o s
6
7#Importando os o b j e t o s do PySide2 u t i l i z a d o s no programa
8from PySide2 . QtGui import QPixmap , Qt , QPainter , QRegExpValidator
9from PySide2 . QtWidgets import QMainWindow , QPushButton , QLabel , QWidget ,
QApplication , QStyleOption , QStyle , QMessageBox , QLineEdit , QS l i d er
10 from PySide2 . QtCore import QRect , Signal , Slot , QCoreApplication ,
QMetaObject , QRegExp , QUrl
11
12 #Importando os o b j e t o s do PySide2 u t i l i z a d o s para reprodu ç ão de v í deo
13 from PySide2 . QtMultimediaWidgets import QVideoWidget
14 from PySide2 . QtMultimedia import QMediaPlayer , QMediaContent
15
16 #Funç ã o para c o nv e r s ã o de caminho do s i s t e m a o p e r a c i o n a l , p ara su a u t i l i z a ç
ão durante a c r i a ç ão de e xecut á v e i s .
17 de f r e so urce _ pa t h ( r e l a t i v e _ p a t h ) :
18 " " " Get a bs ol ut e path to res our ce , works f o r dev and f o r P y I n s t a l l e r
" " "
19 #t r y comando pa ra t e n t a r e xe cu t ar a lg o
20 try :
21 # P y I n s t a l l e r c r e a t e s a temp f o l d e r and s t o r e s path i n _MEIPASS
22 # P y I n s t a l l e r c r i a um arq ui vo tempor á r i o para armazenar o caminho
dos i t e n s chamado _MEIPASS
23 base_path = s ys ._MEIPASS
24 #except comando para v e r i f i c a r se fr a c a ss o u ao t e n ta r e x ecu t ar no try ,
se gun do par â metro é o t i p o de e r r o r , n e s s e c a so Ex ce ptio n , s e der uma
Capítulo 2. Desenvolvimento dos jogos 202
e xc e ç ão , f a ç a
25 except Exception :
26 #Aqui s e usa o caminho padr ã o do s is te ma o p e r a c i o n a l
27 base_path = os . path . abspath ( ".")
28
29 #Aqui e st amos r e to r nando o caminho c o n v e r t i d o com r e tu r n , para c a so s e j a
normal , ou na c r i a ç ão do e xe cut á v e l
30 r e t u r n o s . path . j o i n ( base_path , r e l a t i v e _ p a t h )
31
32 #I n t e r f a c e c r i a d a no QT D es ign er , p r e s e n t e d en t ro do i n t e r f a c e . py
33 class Ui_MainWindow( object) :
34 de f s etupUi ( s e l f , MainWindow ) :
35 i f not MainWindow . objectName ( ) :
36 MainWindow . setObjectName ( u"MainWindow")
37 MainWindow . r e s i z e ( 9 51 , 684)
38 s e l f . c e n t r a l w i d g e t = w i d g e t _ p r i n c i p a l ( MainWindow )
39 s e l f . c e n t r a l w i d g e t . setObjectName ( u" centralwidget " )
40 s e l f . l abe l_ 2 = QLabel ( s e l f . c e n t r a l w i d g e t )
41 s e l f . l a b e l _ 2 . setObjectName (u" label_2 " )
42 s e l f . l a b e l _ 2 . setGeometry (QRect (120 , 190 , 71 , 81) )
43 s e l f . l a b e l _ 2 . setPixmap (QPixmap( u":/ imagens /abelha " ) )
44 s e l f . l a b el_2 . s e t S c a l e d C o n t e n t s ( True )
45 s e l f . l abel_25 = QLabel ( s e l f . c e n t r a l w i d g e t )
46 s e l f . label_25 . setObjectName ( u" label_25" )
47 s e l f . label_25 . setGeometry ( QRect ( 30 , 40 , 891 , 121) )
48 s e l f . l abe l_ 3 = QLabel ( s e l f . c e n t r a l w i d g e t )
49 s e l f . l a b e l _ 3 . setObjectName (u" label_3 " )
50 s e l f . l a b e l _ 3 . setGeometry (QRect (30 , 190 , 71 , 81) )
51 s e l f . l abe l_ 4 = QLabel ( s e l f . c e n t r a l w i d g e t )
52 s e l f . l a b e l _ 4 . setObjectName (u" label_4 " )
53 s e l f . l a b e l _ 4 . setGeometry (QRect (300 , 190 , 71 , 81) )
54 s e l f . l a b e l _ 4 . setPixmap (QPixmap( u":/ imagens /flor" ) )
55 s e l f . l a b el_4 . s e t S c a l e d C o n t e n t s ( True )
56 s e l f . l abe l_ 5 = QLabel ( s e l f . c e n t r a l w i d g e t )
57 s e l f . l a b e l _ 5 . setObjectName (u" label_5 " )
58 s e l f . l a b e l _ 5 . setGeometry (QRect (210 , 190 , 71 , 81) )
59 s e l f . l abe l_ 6 = QLabel ( s e l f . c e n t r a l w i d g e t )
60 s e l f . l a b e l _ 6 . setObjectName (u" label_6 " )
61 s e l f . l a b e l _ 6 . setGeometry (QRect (480 , 190 , 71 , 81) )
62 s e l f . l a b e l _ 6 . setPixmap (QPixmap( u":/ imagens /mel" ) )
63 s e l f . l a b el_6 . s e t S c a l e d C o n t e n t s ( True )
64 s e l f . l abe l_ 7 = QLabel ( s e l f . c e n t r a l w i d g e t )
65 s e l f . l a b e l _ 7 . setObjectName (u" label_7 " )
66 s e l f . l a b e l _ 7 . setGeometry (QRect (390 , 190 , 71 , 81) )
67 s e l f . l abe l_ 8 = QLabel ( s e l f . c e n t r a l w i d g e t )
68 s e l f . l a b e l _ 8 . setObjectName (u" label_8 " )
69 s e l f . l a b e l _ 8 . setGeometry (QRect (660 , 190 , 71 , 81) )
Capítulo 2. Desenvolvimento dos jogos 203
70 s e l f . l abe l_ 9 = QLabel ( s e l f . c e n t r a l w i d g e t )
71 s e l f . l a b e l _ 9 . setObjectName (u" label_9 " )
72 s e l f . l a b e l _ 9 . setGeometry (QRect (570 , 190 , 71 , 81) )
73 s e l f . l abel_10 = QLabel ( s e l f . c e n t r a l w i d g e t )
74 s e l f . label_10 . setObjectName ( u" label_10" )
75 s e l f . label_10 . setGeometry ( QRect ( 7 50 , 1 90 , 71 , 81) )
76 s e l f . l abel_11 = QLabel ( s e l f . c e n t r a l w i d g e t )
77 s e l f . label_11 . setObjectName ( u" label_11" )
78 s e l f . label_11 . setGeometry ( QRect ( 8 40 , 1 90 , 71 , 81) )
79 s e l f . l abel_12 = QLabel ( s e l f . c e n t r a l w i d g e t )
80 s e l f . label_12 . setObjectName ( u" label_12" )
81 s e l f . label_12 . setGeometry ( QRect ( 6 60 , 2 90 , 71 , 81) )
82 s e l f . l abel_13 = QLabel ( s e l f . c e n t r a l w i d g e t )
83 s e l f . label_13 . setObjectName ( u" label_13" )
84 s e l f . label_13 . setGeometry ( QRect ( 2 10 , 2 90 , 71 , 81) )
85 s e l f . label_13 . setPixmap (QPixmap( u":/ imagens/flor" ) )
86 s e l f . l a b el _ 1 3 . s e t S c a l e d C o n t e n t s ( True )
87 s e l f . l abel_14 = QLabel ( s e l f . c e n t r a l w i d g e t )
88 s e l f . label_14 . setObjectName ( u" label_14" )
89 s e l f . label_14 . setGeometry ( QRect ( 4 80 , 2 90 , 71 , 81) )
90 s e l f . label_14 . setPixmap (QPixmap( u":/ imagens/abelha " ) )
91 s e l f . l a b el _ 1 4 . s e t S c a l e d C o n t e n t s ( True )
92 s e l f . l abel_15 = QLabel ( s e l f . c e n t r a l w i d g e t )
93 s e l f . label_15 . setObjectName ( u" label_15" )
94 s e l f . label_15 . setGeometry ( QRect ( 1 20 , 2 90 , 71 , 81) )
95 s e l f . l abel_16 = QLabel ( s e l f . c e n t r a l w i d g e t )
96 s e l f . label_16 . setObjectName ( u" label_16" )
97 s e l f . label_16 . setGeometry ( QRect ( 5 70 , 2 90 , 71 , 81) )
98 s e l f . l abel_17 = QLabel ( s e l f . c e n t r a l w i d g e t )
99 s e l f . label_17 . setObjectName ( u" label_17" )
100 s e l f . label_17 . setGeometry ( QRect ( 3 00 , 2 90 , 71 , 81) )
101 s e l f . l abel_18 = QLabel ( s e l f . c e n t r a l w i d g e t )
102 s e l f . label_18 . setObjectName ( u" label_18" )
103 s e l f . label_18 . setGeometry ( QRect ( 3 90 , 2 90 , 71 , 81) )
104 s e l f . l abel_19 = QLabel ( s e l f . c e n t r a l w i d g e t )
105 s e l f . label_19 . setObjectName ( u" label_19" )
106 s e l f . label_19 . setGeometry ( QRect ( 7 50 , 2 90 , 71 , 81) )
107 s e l f . label_19 . setPixmap (QPixmap( u":/ imagens/abelha " ) )
108 s e l f . l a b el _ 1 9 . s e t S c a l e d C o n t e n t s ( True )
109 s e l f . l abel_20 = QLabel ( s e l f . c e n t r a l w i d g e t )
110 s e l f . label_20 . setObjectName ( u" label_20" )
111 s e l f . label_20 . setGeometry ( QRect ( 7 50 , 3 90 , 71 , 81) )
112 s e l f . l abel_21 = QLabel ( s e l f . c e n t r a l w i d g e t )
113 s e l f . label_21 . setObjectName ( u" label_21" )
114 s e l f . label_21 . setGeometry ( QRect ( 1 20 , 3 90 , 71 , 81) )
115 s e l f . label_21 . setPixmap (QPixmap( u":/ imagens/mel " ) )
116 s e l f . l a b el _ 2 1 . s e t S c a l e d C o n t e n t s ( True )
Capítulo 2. Desenvolvimento dos jogos 204
117 s e l f . l abel_22 = QLabel ( s e l f . c e n t r a l w i d g e t )
118 s e l f . label_22 . setObjectName ( u" label_22" )
119 s e l f . label_22 . setGeometry ( QRect ( 3 00 , 3 90 , 71 , 81) )
120 s e l f . label_22 . setPixmap (QPixmap( u":/ imagens/flor" ) )
121 s e l f . l a b el _ 2 2 . s e t S c a l e d C o n t e n t s ( True )
122 s e l f . l abel_23 = QLabel ( s e l f . c e n t r a l w i d g e t )
123 s e l f . label_23 . setObjectName ( u" label_23" )
124 s e l f . label_23 . setGeometry ( QRect ( 5 70 , 3 90 , 71 , 81) )
125 s e l f . l abel_24 = QLabel ( s e l f . c e n t r a l w i d g e t )
126 s e l f . label_24 . setObjectName ( u" label_24" )
127 s e l f . label_24 . setGeometry ( QRect ( 2 10 , 3 90 , 71 , 81) )
128 s e l f . l abel_26 = QLabel ( s e l f . c e n t r a l w i d g e t )
129 s e l f . label_26 . setObjectName ( u" label_26" )
130 s e l f . label_26 . setGeometry ( QRect ( 6 60 , 3 90 , 71 , 81) )
131 s e l f . label_26 . setPixmap (QPixmap( u":/ imagens/abelha " ) )
132 s e l f . l a b el _ 2 6 . s e t S c a l e d C o n t e n t s ( True )
133 s e l f . l abel_27 = QLabel ( s e l f . c e n t r a l w i d g e t )
134 s e l f . label_27 . setObjectName ( u" label_27" )
135 s e l f . label_27 . setGeometry ( QRect ( 3 90 , 3 90 , 71 , 81) )
136 s e l f . l abel_28 = QLabel ( s e l f . c e n t r a l w i d g e t )
137 s e l f . label_28 . setObjectName ( u" label_28" )
138 s e l f . label_28 . setGeometry ( QRect ( 4 80 , 3 90 , 71 , 81) )
139 s e l f . label_28 . setPixmap (QPixmap( u":/ imagens/flor" ) )
140 s e l f . l a b el _ 2 8 . s e t S c a l e d C o n t e n t s ( True )
141 s e l f . l abel_29 = QLabel ( s e l f . c e n t r a l w i d g e t )
142 s e l f . label_29 . setObjectName ( u" label_29" )
143 s e l f . label_29 . setGeometry ( QRect ( 8 40 , 3 90 , 71 , 81) )
144 s e l f . label_29 . setPixmap (QPixmap( u":/ imagens/abelha " ) )
145 s e l f . l a b el _ 2 9 . s e t S c a l e d C o n t e n t s ( True )
146 s e l f . l abel_30 = QLabel ( s e l f . c e n t r a l w i d g e t )
147 s e l f . label_30 . setObjectName ( u" label_30" )
148 s e l f . label_30 . setGeometry ( QRect ( 30 , 390 , 71 , 81) )
149 s e l f . l abel_31 = QLabel ( s e l f . c e n t r a l w i d g e t )
150 s e l f . label_31 . setObjectName ( u" label_31" )
151 s e l f . label_31 . setGeometry ( QRect ( 30 , 490 , 71 , 81) )
152 s e l f . label_31 . setPixmap (QPixmap( u":/ imagens/abelha " ) )
153 s e l f . l a b el _ 3 1 . s e t S c a l e d C o n t e n t s ( True )
154 s e l f . l abel_32 = QLabel ( s e l f . c e n t r a l w i d g e t )
155 s e l f . label_32 . setObjectName ( u" label_32" )
156 s e l f . label_32 . setGeometry ( QRect ( 1 20 , 4 90 , 71 , 81) )
157 s e l f . l abel_34 = QLabel ( s e l f . c e n t r a l w i d g e t )
158 s e l f . label_34 . setObjectName ( u" label_34" )
159 s e l f . label_34 . setGeometry ( QRect ( 6 60 , 4 90 , 71 , 81) )
160 s e l f . label_34 . setPixmap (QPixmap( u":/ imagens/mel " ) )
161 s e l f . l a b el _ 3 4 . s e t S c a l e d C o n t e n t s ( True )
162 s e l f . l abel_35 = QLabel ( s e l f . c e n t r a l w i d g e t )
163 s e l f . label_35 . setObjectName ( u" label_35" )
Capítulo 2. Desenvolvimento dos jogos 205
164 s e l f . label_35 . setGeometry ( QRect ( 7 50 , 4 90 , 71 , 81) )
165 s e l f . l abel_37 = QLabel ( s e l f . c e n t r a l w i d g e t )
166 s e l f . label_37 . setObjectName ( u" label_37" )
167 s e l f . label_37 . setGeometry ( QRect ( 3 40 , 4 90 , 71 , 81) )
168 s e l f . label_37 . setPixmap (QPixmap( u":/ imagens/flor" ) )
169 s e l f . l a b el _ 3 7 . s e t S c a l e d C o n t e n t s ( True )
170 s e l f . l abel_38 = QLabel ( s e l f . c e n t r a l w i d g e t )
171 s e l f . label_38 . setObjectName ( u" label_38" )
172 s e l f . label_38 . setGeometry ( QRect ( 4 30 , 4 90 , 71 , 81) )
173 s e l f . v alor_abe lha = v a l o r e s ( s e l f . c e n t r a l w i d g e t )
174 s e l f . valor_abelha . setObjectName ( u"valor_abelha")
175 s e l f . valor_abelha . setGeometry ( QRect (21 0 , 490 , 71 , 81) )
176 s e l f . v alor_ abelha . s e t S t y l e S h e e t ( u"font: 87 40pt \" A r i a l \";")
177 s e l f . v a l o r _ f l o r = v a l o r e s ( s e l f . c e n t r a l w i d g e t )
178 s e l f . v a l o r _ f l o r . setObjectName ( u"valor_flor")
179 s e l f . v a l o r _ f l o r . setGeometry ( QRect ( 52 0 , 490 , 7 1 , 8 1) )
180 s e l f . v a l o r _ f l o r . s e t S t y l e S h e e t ( u"font : 87 40pt \" A r i a l \";")
181 s e l f . va lor _m el = v a l o r e s ( s e l f . c e n t r a l w i d g e t )
182 s e l f . valor_mel . setObjectName ( u" valor_mel " )
183 s e l f . valor_mel . setGeometry ( QRect ( 8 40 , 4 90 , 71 , 81) )
184 s e l f . valor_mel . s e t S t y l e S h e e t ( u"font : 87 40pt \" A r i a l \";")
185 s e l f . pushButton = QPushButton ( s e l f . c e n t r a l w i d g e t )
186 s e l f . pushButton . setObjectName ( u"pushButton")
187 s e l f . pushButton . setGeometry ( QRect ( 3 40 , 5 90 , 251 , 71) )
188 s e l f . pushButton . s e t S t y l e S h e e t ( u"font : 87 40pt \" A r i a l \";")
189 s e l f . w id ge t_ es co nd id a = e sco ndido ( s e l f . c e n t r a l w i d g e t )
190 s e l f . widget_escondida . setObjectName ( u"widget_escondida" )
191 s e l f . widget_escondida . setGeometry ( QRect (1 0 , 10 , 9 31 , 6 61) )
192 s e l f . widge t_esco nd ida . s e t S t y l e S h e e t ( u"background -color: rgb (170 ,
170 , 170) ;" )
193 s e l f . pushButton_2 = QPushButton ( s e l f . widget_es condida )
194 s e l f . pushButton_2 . setObjectName ( u"pushButton_2")
195 s e l f . pushButton_2 . setGeometry ( QRect (35 0 , 570 , 251 , 71) )
196 s e l f . pushButton_2 . s e t S t y l e S h e e t ( u" background - color: rgb (240, 240 ,
240);font : 87 40pt \" A r i a l \";")
197 s e l f . h o r i z o n t a l S l i d e r = medi a _ s lider ( s e l f . widget_escondida )
198 s e l f . h o r i z o n t a l S l i d e r . setObjectName ( u" horizontalSlider " )
199 s e l f . h o r i z o n t a l S l i d e r . setGeometry ( QRect ( 40 , 5 30 , 851 , 31) )
200 s e l f . h o r i z o n t a l S l i d e r . s e t O r ie n t a t i o n ( Qt . H or izo nt a l )
201 s e l f . l a b e l = c l i c k l a b e l ( s e l f . widget_escondi da )
202 s e l f . l a b e l . setObjectName ( u"label" )
203 s e l f . l a b e l . setGeometry ( QRect ( 330 , 160 , 271 , 191) )
204 s e l f . l a b e l . s e t S t y l e S h e e t ( u" background -color : rgb(0, 0, 0);" )
205 s e l f . l a b e l . setPixmap ( QPixmap( u":/imagens /play " ) )
206 s e l f . l a b e l . s e t S c a l e d C o n t e n t s ( True )
207 s e l f . widget = v ideo ( s e l f . widget_escondi da )
208 s e l f . widget . setObjectName ( u" widget " )
Capítulo 2. Desenvolvimento dos jogos 206
209 s e l f . widget . setGeometry ( QRect ( 0 , 0 , 931 , 521) )
210 s e l f . widge t . s e t S t y l e S h e e t ( u" background -color : rgb(0, 0, 0);" )
211 s e l f . widget . r a i se_ ( )
212 s e l f . pushButton_2 . ra i se_ ( )
213 s e l f . h o r i z o n t a l S l i d e r . ra i se_ ( )
214 s e l f . l a b e l . ra i se_ ( )
215 MainWindow . s et Ce nt ralWidget ( s e l f . c e n t r a l w i d g e t )
216 s e l f . valor_mel . r ais e _ ( )
217 s e l f . v a l o r _ f l o r . r ais e_ ( )
218 s e l f . valor_abelha . ra i se_ ( )
219 s e l f . l a b e l _ 2 . ra i se_ ( )
220 s e l f . label_25 . r ais e _ ( )
221 s e l f . l a b e l _ 3 . ra i se_ ( )
222 s e l f . l a b e l _ 4 . ra i se_ ( )
223 s e l f . l a b e l _ 5 . ra i se_ ( )
224 s e l f . l a b e l _ 6 . ra i se_ ( )
225 s e l f . l a b e l _ 7 . ra i se_ ( )
226 s e l f . l a b e l _ 8 . ra i se_ ( )
227 s e l f . l a b e l _ 9 . ra i se_ ( )
228 s e l f . label_10 . r ais e _ ( )
229 s e l f . label_11 . r ais e _ ( )
230 s e l f . label_12 . r ais e _ ( )
231 s e l f . label_13 . r ais e _ ( )
232 s e l f . label_14 . r ais e _ ( )
233 s e l f . label_15 . r ais e _ ( )
234 s e l f . label_16 . r ais e _ ( )
235 s e l f . label_17 . r ais e _ ( )
236 s e l f . label_18 . r ais e _ ( )
237 s e l f . label_19 . r ais e _ ( )
238 s e l f . label_20 . r ais e _ ( )
239 s e l f . label_21 . r ais e _ ( )
240 s e l f . label_22 . r ais e _ ( )
241 s e l f . label_23 . r ais e _ ( )
242 s e l f . label_24 . r ais e _ ( )
243 s e l f . label_26 . r ais e _ ( )
244 s e l f . label_27 . r ais e _ ( )
245 s e l f . label_28 . r ais e _ ( )
246 s e l f . label_29 . r ais e _ ( )
247 s e l f . label_30 . r ais e _ ( )
248 s e l f . label_31 . r ais e _ ( )
249 s e l f . label_32 . r ais e _ ( )
250 s e l f . label_34 . r ais e _ ( )
251 s e l f . label_35 . r ais e _ ( )
252 s e l f . label_37 . r ais e _ ( )
253 s e l f . label_38 . r ais e _ ( )
254 s e l f . pushButton . ra i se_ ( )
255 s e l f . widget_escondida . ra i se_ ( )
Capítulo 2. Desenvolvimento dos jogos 207
256
257 s e l f . r e t r a n s l a t e U i (MainWindow )
258 s e l f . pushButton . c l i c k e d . c onnect ( s e l f . c e n t r a l w i d g e t . v e r i f i c a r )
259 s e l f . l a b e l . c l i c k . connect ( s e l f . widget_es condida . play_video )
260 s e l f . widget . c l i c k . connect ( s e l f . widget_es condida . play_video )
261 s e l f . h o r i z o n t a l S l i d e r . s l i derMoved . connect ( s e l f . widget_escondi da .
set_position)
262 s e l f . pushButton_2 . c l i c k e d . c o nnect ( MainWindow . c l o s e )
263
264 QMetaObject . connectSlotsByName ( MainWindow)
265 # setupUi
266
267 de f r e t r a n s l a t e U i ( s e l f , MainWindow ) :
268 MainWindow . setWindowTitle ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,
u"MainWindow" , None ) )
269 s e l f . l a b e l _ 2 . s e t T e x t ( "" )
270 s e l f . l ab e l _ 2 5 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :28 pt ;\" >
Desafio : </ span ></p ><p align =\" center \"> <span style =\" font - size :14 pt ;\" >
Descubra o valor da abelha , da flor e do mel </span ></p><p align =\"
center \"> < span style =\" font - size :14 pt ;\" > para de scobrir como \ u00e9
feito o mel </ span ></p></body ></html >" , None ) )
271 s e l f . l ab el _3 . setText ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
font -weight :600;\" >2 </ span ></p ></body > </ html >" , None ) )
272 s e l f . l a b e l _ 4 . s e t T e x t ( "" )
273 s e l f . l ab el _5 . setText ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
font -weight :600;\" >+ </ span ></p ></body > </ html >" , None ) )
274 s e l f . l a b e l _ 6 . s e t T e x t ( "" )
275 s e l f . l ab el _7 . setText ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
font -weight :600;\" >-</span ></p></body ></html >" , None ) )
276 s e l f . l ab el _8 . setText ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
font -weight :600;\" >-</span ></p></body ></html >" , None ) )
277 s e l f . l ab el _9 . setText ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
font -weight :600;\" >= </ span ></p ></body > </ html >" , None ) )
278 s e l f . l ab e l _ 1 0 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
font -weight :600;\" >1 </ span ></p ></body > </ html >" , None ) )
279 s e l f . l ab e l _ 1 1 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
font -weight :600;\" >2 </ span ></p ></body > </ html >" , None ) )
280 s e l f . l ab e l _ 1 2 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
Capítulo 2. Desenvolvimento dos jogos 208
font -weight :600;\" >-</span ></p></body ></html >" , None ) )
281 s e l f . l a b e l _ 1 3 . s e t T e x t ( "" )
282 s e l f . l a b e l _ 1 4 . s e t T e x t ( "" )
283 s e l f . l ab e l _ 1 5 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
font -weight :600;\" >2 </ span ></p ></body > </ html >" , None ) )
284 s e l f . l ab e l _ 1 6 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
font -weight :600;\" >= </ span ></p ></body > </ html >" , None ) )
285 s e l f . l ab e l _ 1 7 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
font -weight :600;\" >-</span ></p></body ></html >" , None ) )
286 s e l f . l ab e l _ 1 8 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
font -weight :600;\" >7 </ span ></p ></body > </ html >" , None ) )
287 s e l f . l a b e l _ 1 9 . s e t T e x t ( "" )
288 s e l f . l ab e l _ 2 0 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
font -weight :600;\" >-</span ></p></body ></html >" , None ) )
289 s e l f . l a b e l _ 2 1 . s e t T e x t ( "" )
290 s e l f . l a b e l _ 2 2 . s e t T e x t ( "" )
291 s e l f . l ab e l _ 2 3 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
font -weight :600;\" >= </ span ></p ></body > </ html >" , None ) )
292 s e l f . l ab e l _ 2 4 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
font -weight :600;\" >-</span ></p></body ></html >" , None ) )
293 s e l f . l a b e l _ 2 6 . s e t T e x t ( "" )
294 s e l f . l ab e l _ 2 7 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
font -weight :600;\" >* </ span ></p ></body > </ html >" , None ) )
295 s e l f . l a b e l _ 2 8 . s e t T e x t ( "" )
296 s e l f . l a b e l _ 2 9 . s e t T e x t ( "" )
297 s e l f . l ab e l _ 3 0 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
font -weight :600;\" >3 </ span ></p ></body > </ html >" , None ) )
298 s e l f . l a b e l _ 3 1 . s e t T e x t ( "" )
299 s e l f . l ab e l _ 3 2 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
font -weight :600;\" >= </ span ></p ></body > </ html >" , None ) )
300 s e l f . l a b e l _ 3 4 . s e t T e x t ( "" )
301 s e l f . l ab e l _ 3 5 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
font -weight :600;\" >= </ span ></p ></body > </ html >" , None ) )
302 s e l f . l a b e l _ 3 7 . s e t T e x t ( "" )
303 s e l f . l ab e l _ 3 8 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<
html ><head /><body ><p align =\" center\" >< span style =\" font - size :48 pt;
Capítulo 2. Desenvolvimento dos jogos 209
font -weight :600;\" >= </ span ></p ></body > </ html >" , None ) )
304 s e l f . pushButton . s et Te xt ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"
Verificar" , None ) )
305 s e l f . pushButton_2 . setText ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,
u"Fechar" , None ) )
306 s e l f . l a b e l . s e t T e x t ( "" )
307 # r e t r a n s l a t e U i
308
309 #Criando a nova c l a s s e v a l o r e s baseado no QLineEdit , para d e f i n i r um
v a l i d a d o r de t ext o , p ermitindo ap enas e s c r e v e r números de 1 a 99 no
i nput de t e x t o
310 class v a l o r e s ( QLineEdit ) :
311 #Criando a fun ç ão de i n i c i a l i z a ção , que se executa cada vez que o
programa c r i a uma nova QLineEdit u t i l i z a n d o a c l a s s e v a l o r e s
312 de f __init__ ( s e l f , parent=None ) :
313 #G ar antindo su a exe cu ç ã o
314 super ( ) . __init__ ( p aren t )
315 #Def i nindo q ua l é seu v alida dor , u t i l i z a n d o o QRegExpValidator , com o
p r o p r i o o b j e t o e QRegExp pas sa ndo q u a i s s ã o o s p o ss í v e i s c a r a c t e r e s p or
c asa r e p r e s e n t a d o po r [ ] , n e s s e c a so s ó v a l i d a d e duas c a s a s por i s s o
apena s d o i s [ ] , sen do a p r i m e i r a c a s o a c e i t a n d o e n t r e 1 e 9 , o s i n a l de
menos s e r e p r e s e n t a e n t r e o s v a l o r e s , e su a s egu nda c a sa a c e i t a n d o e n t r e
0 e 9
316 s e l f . s e t V a l i d a t o r ( QRegExpValidator ( QRegExp( "[1-9][0 -9] " ) , s e l f ) )
317 #Def i nindo que os t e x t o s vão e s t a r c e n t r a l i z a d o s ao e s c re v e r
318 s e l f . setAlign m ent ( Qt . AlignCent e r )
319
320
321 #Criando a nova c l a s s e c l i c k l a b e l baseado na QLabel , para a di c i o na r a fun ç ã
o de c l i c k
322 class c l i c k l a b e l ( QLabel ) :
323 #Criand o o s i n a l que f o i c r i a d o no e d i t o r de s i n a i s no QT Desi gn er , é
i mp orta n te t e r o mesmo nome , n e s s e c a so c l i c k .
324 c l i c k = S i g n a l ( )
325 #Mudando a f un ç ã o padr ã o do c l i c k do mouse , par a f a z e r a l g o e x t r a .
326 de f mousePressEvent ( s e l f , e v ent ) :
327 #Adicionando que apó s c l i c a r com o mouse e l e emita o s i n a l c l i c k .
328 s e l f . c l i c k . emit ( )
329
330 #Criand o a nova c l a s s e w i d g e t _ p r i n c i p a l ba se ado na QWidget , onde s e f a z a
v e r i f i c a ç ão se os v a l o r e s e st ão ce rt o s , e caso e s t e j a mostre um mensagem
, e cada v a l o r c o r r e t o f i q u e com bord a v erde , e o s e r r a d o s com bo rda
ve rmelha e f oque n e l e .
331 class widget_principal(QWidget) :
332 #Criando a fun ç ão de i n i c i a l i z a ção , que se executa cada vez que o
programa c r i a um novo w i dg et u t i l i z a n d o a c l a s s e w i d g e t _ p r i n c i p a l
333 de f __init__ ( s e l f , parent=None ) :
Capítulo 2. Desenvolvimento dos jogos 210
334 #G ar antindo su a exe cu ç ã o
335 super ( ) . __init__ ( p aren t )
336 #Criando as v a r i á v e i s de v e r i f i c a ç ão s e o v a l o r e s e st ão c o r r e t o s ou não
, por padr ão va i c r i a r como f a l s o , para abelha , f l o r e mel
337 s e l f . abelha = Fa l se
338 s e l f . f l o r = Fa l se
339 s e l f . mel = Fa l se
340
341 #Cr ia ç ão dos s l o t s , os r e c e p t o r e s do s i n a l c l i c k ed , para i s s o sempre a
fun ç ão tem que t e r o nome do s l o t , d e f i n i d o no QT D esigner , e s e r
d e f i n i d o @ sl ot ( ) a ntes da fun ç ão
342 @Slot ( )
343 de f v e r i f i c a r ( s e l f ) :
344 #Aqui nó s pegamos o QLineEdit e armazenamos na v a r i á vel , para i s s o
vamos u sar o f i n d c h i l d , passando o t i p o QLineEdit e o nome d ele , por
i s s o que é i mpo rtan te t e r mudado s eu nome no QT D es ig ner , p o i s no w id ge t
p o s s u i 3 d i f e r e n t e s , que é ne ce s s á r i o e s p e c i f i c á l o s
345 #Criando as v a r i á v e i s possuindo o nome do QLineEdit , para f i c a r mais f á
c i l sua i d e n t i f i c a ç ão enquanto se t r a b al h a com e l a s
346 v al or_abelha = s e l f . f i n d C h i l d ( QLineEdit , "valor_abelha")
347 v a l o r _ f l o r = s e l f . f i n d C h i l d ( QLineEdit , "valor_flor")
348 va lor_mel = s e l f . f i n d C h i l d ( QLineEdit , " valor_mel" )
349
350 #Aqui v e r i f i c a m o s s e o t e xt o do valor_ab elha c ond iz com o número da
abelha , 3 , para i s s o usamos a fun ç ão d i spla y Text ( ) do QLineEdit e
comparamos com o v a l o r 3 em forma de t e x t o " 3 "
351 i f ( valor_a belha . d i spla yTex t ( ) == "3") :
352 #Se o v a l o r f o r 3 , d e f i n i m o s que o v a l o r da a b elha e s t á c o r r e t o ,
passando para a v a r i a v e l a be lh a o va l or True
353 s e l f . abelha = True
354 #Aqui d ef in i mo s o e s t i l o da QLineEdit chamada valor_abelha , mantendo
o t i p o de f onte , e a d ici on a n do uma borda s ó l i d a verde , de 1 p i x e l , com
border : 1px s o l i d green ;
355 valor_abelh a . s e t S t y l e S h e e t ( u"font: 87 40pt \" A r i a l \";border: 1px
solid green;" )
356 #Aqui d e f i n i m o s que a QL in eEdit chamada val o r_ ab elh a , nã o e s t á ma is
h a b i l it a d a para e s c r i t a , travando e l a
357 valor_abelh a . s e tEnabled ( F a ls e )
358 #Aqui v e r i f i c a m o s s e todas as o u tra s v e r i f i c a ç õ e s falharam , resumindo o
v a l o r não e r á 3
359 e l s e :
360 #Se o v a l or e ra d i f e r e n t e de 3 , f o ca na QLineEdit chamada
valor_abelha
361 valor_abelh a . set Fo cus ( )
362 #Aqui d ef in i mo s o e s t i l o da QLineEdit chamada valor_abelha , mantendo
o t i p o de f onte , e a d ici on a n do uma borda s ó l i d a vermelha , de 1 p i x e l ,
com b o r der : 1px s o l i d red ;
Capítulo 2. Desenvolvimento dos jogos 211
363 valor_abelh a . s e t S t y l e S h e e t ( u"font: 87 40pt \" A r i a l \";border: 1px
solid red;" )
364
365 #Aqui r e petim o s a v e r i f i c a ç ão que f o i f e i t a para a abelha , mudando para
f l o r , e s e o v a l o r é 9 .
366 #Aqui v e r i f i c a m o s s e o t e xt o do v a l o r _ f l o r c on diz com o número da f l o r ,
9 , para i s s o usamos a fun ç ão d i s playT e x t ( ) do QLineEdit e comparamos
com o v a l o r 9 em f orm a de t e x t o " 9 "
367 i f ( v a l o r _ f l o r . d i spla yTex t ( ) == "9") :
368 #Se o v a l o r f o r 9 , d e f i n i m o s que o v a l o r da f l o r e s t á c o r r e t o ,
passando para a v a r i a v e l f l o r o v al or True
369 s e l f . f l o r = True
370 #Aqui d e f i n i m o s o e s t i l o da QLineEdit chamada v a l o r _ f l o r , mantendo o
t i p o de f onte , e a d icio nando uma borda s ó l i d a v erde , de 1 p i x e l , com
border : 1px s o l i d green ;
371 v a l o r _ f l o r . s e t S t y l e S h e e t ( u"font : 87 40pt \" A r i a l \";border: 1px solid
green;" )
372 #Aqui d e f i n i m o s que a QLineEdit chamada v a l o r _ f l o r , nã o e s t á mais
h a b i l it a d a para e s c r i t a , travando e l a
373 v a l o r _ f l o r . setEnabled ( Fa lse )
374 #Aqui v e r i f i c a m o s s e todas as o u tra s v e r i f i c a ç õ e s falharam , resumindo o
v a l o r não e r á 9
375 e l s e :
376 #Se o v a l or e ra d i f e r e n t e de 9 , f o ca na QLineEdit chamada v al o r_ f lo r
377 v a l o r _ f l o r . s etFocus ( )
378 #Aqui d e f i n i m o s o e s t i l o da QLineEdit chamada v a l o r _ f l o r , mantendo o
t i p o de f onte , e a d icio nando uma borda s ó l i d a ver melha , de 1 p i x e l , com
border : 1px s o l i d re d ;
379 v a l o r _ f l o r . s e t S t y l e S h e e t ( u"font : 87 40pt \" A r i a l \";border: 1px solid
red;" )
380
381 #Aqui r e petim o s a v e r i f i c a ç ão que f o i f e i t a para a abelha , mudando para
mel , e s e o v a l o r é 2 7 .
382 #Aqui v e r i f i c a m o s s e o t e xt o do valor_mel c on diz com o número da mel ,
27 , para i s s o usamos a fun ç ão d i spla y Text ( ) do QLineEdit e comparamos
com o v a l o r 27 em forma de t e x t o " 2 7 "
383 i f ( valor_mel . d isp layT ext ( ) == "27" ) :
384 #Se o v a l o r f o r 27 , d e f i n i m o s que o v a l o r da mel e s t á c o r r e t o ,
passando para a v a r i a v e l mel o v a lo r True
385 s e l f . mel = True
386 #Aqui d ef in i mo s o e s t i l o da QLineEdit chamada valor_mel , mantendo o
t i p o de f onte , e a d icio nando uma borda s ó l i d a v erde , de 1 p i x e l , com
border : 1px s o l i d green ;
387 valor_mel . s e t S t y l e S h e e t ( u"font : 87 40pt \" A r i a l \";border: 1px solid
green;" )
388 #Aqui d e f i n i m o s que a QL in eEdit chamada va lo r_mel , nã o e s t á mai s
h a b i l it a d a para e s c r i t a , travando e l a
Capítulo 2. Desenvolvimento dos jogos 212
389 valor_mel . setEnabled ( Fal s e )
390 #Aqui v e r i f i c a m o s s e todas as o u tra s v e r i f i c a ç õ e s falharam , resumindo o
v a l o r não e r á 27
391 e l s e :
392 #Se o v a l or e ra d i f e r e n t e de 27 , f oc a na QLineEdit chamada valor_mel
393 valor_mel . s etFoc us ( )
394 #Aqui d ef in i mo s o e s t i l o da QLineEdit chamada valor_mel , mantendo o
t i p o de f onte , e a d icio nando uma borda s ó l i d a ver melha , de 1 p i x e l , com
border : 1px s o l i d re d ;
395 valor_mel . s e t S t y l e S h e e t ( u"font : 87 40pt \" A r i a l \";border: 1px solid
red;" )
396
397 #Aqui v e r i f i c a m o s s e todos os v a l o r e s e s t ão c e rt os , v e r i f i c a n d o as v a r i
á v e i s a belh a , f l o r e mel s ã o v e r d a d e i r a s .
398 i f ( s e l f . a b e lha and s e l f . f l o r and s e l f . mel ) :
399 #Caso s e j a vamos c r i a r um popup de mensagem
400 msgBox = QMessageBox ( )
401 #Aqui d e f i n i m o s o t í t u l o do popup de mensagem
402 msgBox . setWi ndowTitle ( u"Parab éns" )
403 #Aqui d e f i n i m o s q ua l a mensagem do popup de mensagem Parab é n s os
v a l o r e s e st ão c e r t o s . Continue agor a com o v í deo : Produzindo mel , mais
pa ra f i c a r com i nden ta ç ão , l e t r a gran de e nt r e o ut ra s c o i s a s , s e u t i l i z a
o QT D esigner para d e f i n i r seu e s t i l o , c r ian d o uma l ab e l , e apertando
change r i c h te xt , e s cr eve ndo e dei xando como desejado , d e p o i s s ó c o p i a r
o campo t ex t , no e d i t o r de pr op ried ades , onde t er á s um c ó digo enorme ,
come ç ando com <html>
404 msgBox . s etText ( u<html ><head /><body ><p align =" center "><span style ="
font -size :20 pt;"> Parab éns os valores estão certos </span >< span style ="
font -size :20 pt; font -weight :600;" >! </ span ><span style =" font -size :20 pt
;"> Continue agora com o vídeo </span >< span style =" font -size :20 pt; font
-weight :600;" >: </span ></p><p align=" center "><span style =" font -size :28 pt
; font -weight :600;" >Produzindo mel </span ></p></body ></html > )
405 #Aqui d e f i n i m o s q ua l o bo t ão do popup de mensagem , n e s s e c a so um bo t ã
o OK
406 msgBox . s e tSt a ndardBu t tons ( QMessageBox . Ok)
407 #Aqui d e f i n i m o s q ua l o bo t ão do popup de mensagem é o pad r ão , p ara
c as o a p e r t e ESC, Ent er , Spa ce no t e c l a d o , a c i o n e o bot ã o
408 msgBox . s e t De f au lt B ut to n ( QMessageBox . Ok)
409 #Aqui v e r i f i c a m o s s e a mensagem f o i executada , no c aso acionad o algum
bot ão
410 r e t = msgBox . exec_ ( )
411 #Aqui v e r i f i c a m o s s e o bot ão a cion ado f o i Ok
412 i f r e t == QMessageBox . Ok :
413 #Caso tenha s i d o s e l e c i o n a d o Ok, s e p roc ura o f i l h o QWidget da
c l a s s e es condida , como e l e tem mais de um f i l h o QWidget , é i mportant e
t e r nomeado o wid get p ara w id ge t_ es co nd id a , ap ó s a cha r d e f i n i m o s que e l e
não é mais ocu l t a , aparecendo na t e l a
Capítulo 2. Desenvolvimento dos jogos 213
414 s e l f . f i n d C h i l d ( QWidget , u" widget_escondida " ) . setHidden ( F a lse )
415
416 #Criando a nova c l a s s e escond i d o baseado no QWidget , para torn ál o i n v i s í
v e l e a d i c i o n a r o p l a y e r de v í deo .
417 class e sco ndid o ( QWidget ) :
418 #Criando a fun ç ão de i n i c i a l i z a ção , que se executa cada vez que o
programa c r i a um novo widget u t i l i z a n d o a c l a s s e e scondi d o
419 de f __init__ ( s e l f , parent=None ) :
420 #G ar antindo su a exe cu ç ã o
421 super ( ) . __init__ ( p aren t )
422 #Aqui e stamos d e f i n i n d o que a w id ge t e sco ndido é para e s t a r es con dida ,
para i s s o usamos a fun ç ão setHidden passando o par âmetro True , para que
quando f o r c r i a d o a t e l a e s t e j a e sco ndi da
423 s e l f . setHidden ( True )
424 #Aqui c ri a mo s um p l a y e r de v í deo , usando o QMediaPlayer , como um
componente da c l a s s e e s c ondido
425 s e l f . mediaPlayer = QMediaPlayer ( None , QMediaPlayer . V i d e oSurface )
426 #Aqui criamos uma v a r i a v e l para armazenar o caminho do video , usando a
fun ç ã o r es o ur ce_p a th ( ) que cria m os no come ç o do arq uiv o , para p eg ar o
caminho r e l a t i v o , que f u n c i o n e p ara c r i a ç ão de e x ec ut á v e i s ou como c ó
digo normal
427 l o c a l _ v i d e o = reso urce_ path ( u" video/mel.avi" )
428 #Aqui d e f i ni mo s q ual v a i s e r o v í deo , usando QMediaContent , e d e f i n i n d o
que é l o c a l com QUrl . f r o m L o c a l F i l e e p as sand o como p ar â metro o caminho
armazenado na v a r i a v e l l oc al_ vid eo , c r i a d a a n te ri orm en te
429 s e l f . m ed ia Pl ay er . s et Med ia ( QMediaContent ( QUrl . f r o m L o c a l F i l e ( l o c a l _ v i d e o )
) )
430 #Aqui c ri a mo s um l i n k p ar a o p l a y e r de v í deo , para c a so o e s t a do mude
um s i n a l chamado stateChanged , a c i on e que o e stado mudou , um r e c e p t o r
me di ast at e_c ha nge d , c r i a d o na pr ó p r i a c l a s s e
431 s e l f . mediaPlayer . stateChanged . c o n n ect ( s e l f . mediastate_changed )
432
433 #Essa fun ç ão mo d if i ca o e f e i t o de pintu r a , p o i s widgets promovidas não
ace ita m pl ano de fundo , por i s s o p r e c i s a s e mudar s ua fun ç ã o n ati v a , não
p re ci sa ndo mexer , tendo em vá r i o s l u g a r e s seu c ó d ig o pron to .
434 de f p aintE vent ( s e l f , pe ) :
435 o = QStyleOption ()
436 o . init From ( s e l f )
437 p = QPainter ( s e l f )
438 s e l f . s t y l e ( ) . drawPrimitive ( QStyle . PE_Widget , o , p , s e l f )
439
440 #Criando fun ção play_video , para d e f i n i r se o v í deo e s t á tocando ou
parado , mudando seu comportamento
441 de f play_video ( s e l f ) :
442 #V e r i f i c a se o es t ado do vid e o e st á tocando
443 i f s e l f . mediaPlayer . s t a t e ( ) == QMediaPlayer . P lay ing Sta te :
444 #Caso o v í deo e s t e j a tocando , mudamos seu e stado para parado usando a
Capítulo 2. Desenvolvimento dos jogos 214
fun ç ã o p ause ( )
445 s e l f . mediaPlayer . pause ( )
446 #Aqui v e r i f i c a m o s s e todas as o u tra s v e r i f i c a ç õ e s falharam , resumindo
s e o e sta do do v ideo não e s t á tocando
447 e l s e :
448 #Caso o v í deo não e s t e j a tocando , mudamos seu est a d o para tocando
usando a fu n ç ã o p lay ( )
449 s e l f . mediaPlayer . play ( )
450
451 #Criando a fun ção para v e r i f i c a ç ão s e e st á tocando o v í deo , ou e st á
desativado
452 de f mediastate_changed ( self , state ) :
453 #Aqui s e v e r i f i c a s e o esta d o do vid e o e s t á tocando
454 i f s e l f . mediaPlayer . s t a t e ( ) == QMediaPlayer . P lay ing Sta te :
455 #Caso e s t e j a t oc an do , d e f i n i m o s que a imagem do p lay f i c a
tr ansp a rent e , para não f i c a r na f r e n t e do v í deo
456 s e l f . f in dC h i l d ( c l i c k l a b e l ) . setH idden ( True )
457 #Aqui s e v e r i f i c a s e o e s t a do do v i d e o e s t á d e s l i g a d o , c aso a o u tr a
v e r i f i c a ç ão tenha fa l ha d o
458 elif s e l f . mediaPlayer . s t a t e ( ) == QMediaPlayer . Stop pe dState :
459 #Caso e s t e j a d e s l i g a d o , d e f i n i m o s que a imagem do p lay f i c a v i s í v el ,
para f i c a r na f r e n t e do v í deo , apagado a imagem do bot ão play
460 s e l f . f in dC h i l d ( c l i c k l a b e l ) . setH idden ( Fa l se )
461
462 #Criando a fun ç ão que d e f i n e a p o si ç ão do v í deo
463 de f s e t _ p o s i t i o n ( s e l f , p o s i t i o n ) :
464 #D efin indo a p o s i ç ã o do v í deo
465 s e l f . mediaPlayer . s e t P o s i t i o n ( p o s i t i o n )
466
467 #Criando a nova c l a s s e m ed ia _s li de r baseado na QSli der , para mudar sua p o si
ç ão co nfor me o v í deo t o ca
468 class media_slider(QSlider) :
469 #Criando a fun ç ão de i n i c i a l i z a ção , que se executa cada vez que o
programa c r i a um novo s l i d e r u t i l i z a n d o a c l a s s e media_s lider , e
d e f i n i n d o que s eu paren te é um QWidget , n e ss e caso a c l a s s e e sco ndid o
470 de f __init__ ( s e l f , parent=QWidget ) :
471 #G ar antindo su a exe cu ç ã o
472 super ( ) . __init__ ( p aren t )
473 #Aqui s e l i n k a todas as v e z e s que mudar a p o s i ç ão do p l a y e r de v í deo
com a p o s i ç ão do s l i d e r , lin kand o o p ar en t e com a pr ó p r ia , p o i s ao c r i a r
o pare n t e escond ido , o s l i d e r a inda não e x is t e , ocasionando er ro c a s o
t ent e l i n k á l os , tendo ent ão que l i n k a r o p arente com o s l i d e r na c r i a ç ã
o do s l i d e r
474 s e l f . parent ( ) . mediaPlayer . positi o nChanged . connect ( s e l f . position_chan g e d
)
475 #Aqui s e l i n k a todas as v e z e s que mudar a dura ç ã o do p l a y e r de v í deo
com a dura ção do s l i d e r
Capítulo 2. Desenvolvimento dos jogos 215
476 s e l f . parent ( ) . mediaPlayer . durationChanged . connect ( s e l f . duration_changed
)
477
478 #Aqui criamos o r e c e p t o r positi on_chan ged par a mudar a p o s i ç ã o da bar ra ,
conforme o v í deo toca
479 @Slot ( )
480 de f p os it io n_ ch an ge d ( s e l f , p o s i t i o n ) :
481 #aqui d e f i n i m o s sua nova p o s i ç ão
482 s e l f . setV alue ( p o s i t i o n )
483
484 #Aqui criamos o r e c e p t o r d uration_changed pa ra mudar a dura ç ão co nforme o
v í deo toca
485 @Slot ( )
486 de f duration_changed ( s e l f , dura t ion ) :
487 #aqui d e f i n i m o s sua nova dur a ç ã o
488 s e l f . setRange ( 0 , d urat i on )
489
490 #Criando a nova c l a s s e v ideo baseado na QVideoWidget , para mudar rodar o
video
491 class vide o ( QVideoWidget ) :
492 #Criando a fun ç ão de i n i c i a l i z a ção , que se executa cada vez que o
programa c r i a um novo QVideoWidget u t i l i z a n d o a c l a s s e video , e
d e f i n i n d o que s eu paren te é um QWidget , n e ss e caso a c l a s s e e sco ndid o
493 de f __init__ ( s e l f , parent=QWidget ) :
494 #G ar antindo su a exe cu ç ã o
495 super ( ) . __init__ ( p aren t )
496 #Aqui d e f i n i m o s que o l o c a l onde o v í deo v a i t o c a r v a i s e r e s s a l a b e l ,
d e f i n i n d o em seu p arent e no med iapla ye r , tendo que s e r f e i t o na
i n i c i a l i z a ç ão da c l a s s e video , po i s ao paren t e es c ondid o s e r c riado , a
wid get v i d eo ainda não f o i cr i a d o , por i s s o tem que d e f i n i r e la durante
a c r i a ç ão da c l a s s e v ideo
497 s e l f . parent ( ) . mediaPlayer . setVideoOutput ( s e l f )
498
499 #Criand o o s i n a l que f o i c r i a d o no e d i t o r de s i n a i s no QT Desi gn er , é
i mp orta n te t e r o mesmo nome , n e s s e c a so c l i c k .
500 c l i c k = S i g n a l ( )
501 #Mudando a f un ç ã o padr ã o do c l i c k do mouse , par a f a z e r a l g o e x t r a .
502 de f mousePressEvent ( s e l f , e v ent ) :
503 #Adicionando que apó s c l i c a r com o mouse e l e emita o s i n a l c l i c k , que
f o i l i n k a d o com p la y_ vid eo ( ) no QT D e s igne r
504 s e l f . c l i c k . emit ( )
505
506 #Tendo c r i ad o tudo , vamos c r i a r a j a n e l a p r i n c i p a l , u t i l i z a n d o a i n t e r f a c e
c r i a d a no QT De sig ne r , como f e i t o pa ra o j o go da me r i a
507 class MainWindow(QMainWindow , Ui_MainWindow) :
508 #Funç ão de i n i c i a l i z a ç ão
509 de f __init__ ( s e l f ) :
Capítulo 2. Desenvolvimento dos jogos 216
510 #G ar antindo su a exe cu ç ã o
511 super(MainWindow , s e l f ) . __init__ ( )
512 #Adicionando a i n t e r f a c e
513 s e l f . setup Ui ( s e l f )
514 #Mostrando a i n t e r f a c e
515 s e l f . show ( )
516
517 #Começ o da a p l i c a ç ão , d e f i n i n d o seu i n í c i o p r i n c i p a l
518 i f __name__ == __main__ :
519 #Defi n e a c r i a ç ão do a p l i c a t i v o
520 app = QApplicat ion ( sys . argv )
521 #Adicionando a j a n e l a p r i n c i p a l para o a p l i c a t i v o
522 mainWin = MainWindow ( )
523 #Executando o a p l i c a t i v o
524 r e t = app . exec_ ( )
525 #Terminando o programa
526 sy s . e x i t ( )
digo 44 Código completo do jogo de álgebra linear
2.3.25 Criação do executável individual
Na subsecção anterior fora finalizado o digo, arrumando seus importes, nessa
subsecção vamos criar seu executavel individual, sendo importante que o vídeo esteja no
formato .avi, pois é o padrão aceito do Python, para outros formatos podem ocasionar
erros, como pode ser visto no site (CLAY,2020), agora vamos abrir o terminal para
conventer o aplicativo.py para um executável único usando o pyinstaller, primeiramente
como sempre, abrindo o terminal e indo até a pasta onde se encontra a aplicação, no
caso do windows, nesse projeto onde foi colocado na pasta Documentos na pasta xyz,
usamos cd Documents/xyz para chegar em seu diretório, e executamos o comando 45,
sendo como visto anteriormente às opções na criação do jogo da memória, porém com a
adição do vídeo, que se encontra na pasta video, dentro do xyz, usando a opção –add-
data="video
\
mel.avi;video"para definir que vai ter data adicional, passando seu caminho,
video
\
mel.avi, depois usamos o ; para finalizar e adicionar um apelido, o apelido é
importante ter o mesmo nome da pasta onde o vídeo se encontra, para não ter alterações
em seu caminho na aplicação, que usamos a função resource_path para criar, assim
funcionando para a criação do executável. Tendo feito isso no windows vai ter um .exe que
funciona, até em outras máquinas sem python.
1pyinstaller hiddenimport PySide2 . QtXml noconfirm onefile adddata=
"video /mel .avi;video " name="algebra_do_mel" aplicativo .py
digo 45
Comando utilizado para converter o arquivo aplicativo.py em um executável
individual
Capítulo 2. Desenvolvimento dos jogos 217
2.4 Conclusão do capitulo 2.
Nesse capitulo foi criado os exemplos de jogos educacionais, sendo eles um jogo
de memoria para química com informativos gerais e o outro um jogo de álgebra para
matemática e biologia, sendo presente sua construção desde a instalação e configuração
do Python e seus componentes, a criação da interface gráfica no Qt Design, a criação do
digo em Python usando o PySide2 e por fim a criação do executável, tendo terminado o
projeto nesse capitulo, seu intuito é servir de base para aqueles que quiserem criar jogos,
durante sua criação foi interessante pois nunca tinha usado o PySide2 antes e nenhum tipo
de ferramenta de modelagem, tendo que aprender desde o zero para criar os jogos, podendo
verificar sua facilidade em criação e o suporte encontrado, sempre que encontrava alguma
duvida de como fazer alguma coisa, tinha vários sites com a resposta, podendo escolher
qual melhor se encaixava na aplicação, para outros que forem começar a desenvolver não
encontraram problemas em seu desenvolvimento, sendo por causa desse projeto que ensina
a criar jogos e pode ser usado como base para criação, ou pelo o apoio e material disponível
do PySide2 e Qt Design na Internet, contanto que se dedique acredito que todos possam
fazer seus próprios jogos educacionais, o primeiro passo foi dado com esse projeto, falta
a sua dedicação e vontade de melhorar o aprendizado dos estudantes.
218
3 Conclusão
Quando fora iniciado o projeto se tinha a intenção de apenas melhorar a opinião
sobre jogos digitais e em especial jogos para educação e abrir uma proposta para os
professores criarem jogos educacionais, fazendo uma analise de qual linguagem, interface
e modelador de interface seria o melhor para os professores que não tem experiência
com programação, mostrando os pontos e motivos pela seleção. No entanto, ao longo
do desenvolvimento, fora percebido que mesmo verificando qual seria a linguagem mais
fácil de se usar, não seria o suficiente para cumprir o propósito de abrir portas para que
professores criassem seus próprios jogos educacionais.
Foi preciso aprofundar a pesquisa de como facilitar mais o aprendizado e construção
dos jogos, sendo compreendido que seria um tutorial de como criar jogos educacionais,
mudando seu foco após ter verificado qual a linguagem a ser utilizada, para a criação de
um tutorial completo de criação de jogos educacionais, para servir de base para o futuro
desenvolvimento de outros tipos de jogos educacionais.
Os jogos escolhidos não foram escolhidos de forma aleatória ou sem critérios, para
escolher quais jogos utilizar fora baseado nas matérias que meus colegas e amigos do
ensino médio tiveram dificuldade, sendo elas matemática, química e física, selecionando
um jogo para aprendizado de química juntamente de informativos gerais e outro jogo para
matemática com biologia, a matéria de física fora mostrado vários exemplos de jogos, e
escolhido não criar um exemplo para não ficar muito longo o projeto, sendo um exemplo o
suficiente para se basear, e com a criação de dois jogos como exemplo não havia necessidade
de criar um terceiro jogo.
219
Referências
123 APPS. Video Converter online. Disponível em:
<
https://convert-video-online.com/
>
.
Acesso em: 15 de mar. 2021.
AHMEDWAS. Adding a data file in Pyinstaller using the onefile option. 2018.
Stack Overflow. Disponível em: <https://stackoverflow.com/questions/51060894/
adding-a-data-file-in-pyinstaller-using-the-onefile-option>. Acesso em: 15 de mar. 2021.
ALPHANUMERIC. PyQT LineEdit Border Color. 2014. Stack Overflow. Disponível em:
<https://stackoverflow.com/questions/21193729/pyqt-lineedit-border-color>. Acesso em:
15 de mar. 2021.
ARVOREAGUA. Você Sabia? 2020. Instagram. Disponível em: <https://www.instagram.
com/p/CIY-ADzniEw/?igshid=12dbu9vbkv5ch>. Acesso em: 15 de mar. 2021.
BLACKFENIX06. time.sleep() and BackGround Windows PyQt5. 2017. Stack
Overflow. Disponível em: <https://stackoverflow.com/questions/48039309/
time-sleep-and-background-windows-pyqt5>. Acesso em: 15 de mar. 2021.
BOY innocent. Make Qlabel clickable or double clickable in Qt. 2017. Stack
Overflow. Disponível em: <https://stackoverflow.com/questions/44946009/
make-qlabel-clickable-or-double-clickable-in-qt>. Acesso em: 15 de mar. 2021.
CLAY. [Solved][PyQt5] DirectShowPlayerService::doRender: Unresolved error code
0x8040266 (IDisspatch error #102). 2020. Clay-Technology World. Disponível em: <https:
//clay-atlas.com/us/blog/2020/10/14/pyqt5-en-qmediaplayer-directshowplayerservice/
>. Acesso em: 15 de mar. 2021.
Clip Art Max. H20 Ar - H2o Icono Png. Clip Art Max. Disponível em: <https:
//www.clipartmax.com/middle/m2i8m2d3G6K9m2m2_h20-ar-h2o-icono-png/>. Acesso
em: 15 de mar. 2021.
CUNHA, F. Make QLabel clickable. 2017. Stack Overflow. Disponível em:
<https://stackoverflow.com/questions/45575626/make-qlabel-clickable>. Acesso em: 15
de mar. 2021.
DAWKINS, P. Section 7-2 : Linear Systems With Three Variables. Paul’s Online Notes.
Disponível em: <https://tutorial.math.lamar.edu/classes/alg/systemsthreevrble.aspx>.
Acesso em: 15 de mar. 2021.
DENLORD. How to play video in a QVideoWidget promoted in Qt Designer? 2018.
Stack Overflow. Disponível em: <https://stackoverflow.com/questions/49423350/
how-to-play-video-in-a-qvideowidget-promoted-in-qt-designer>. Acesso em: 15 de mar.
2021.
Detetives do Cosmos. Você Sabia? 2021. Facebook. Disponível em: <https://www.
facebook.com/Detetives-do-Cosmos-110102813986748/photos/230538785276483>. Acesso
em: 15 de mar. 2021.
Referências 220
DIABETES, N. N. de Estudos em Obesidade e. Você Sabia? 2020. Facebook. Disponível
em: <https://www.facebook.com/neodiaufla/photos/2498106250501789>. Acesso em: 15
de mar. 2021.
EAMONN. Moving QSlider to Mouse Click Position. 2018. Stack Over-
flow. Disponível em: <https://stackoverflow.com/questions/52689047/
moving-qslider-to-mouse-click-position>. Acesso em: 15 de mar. 2021.
FBENCE. pyqt5 videowidget not showing in layout. 2017. Stack Over-
flow. Disponível em: <https://stackoverflow.com/questions/41612790/
pyqt5-videowidget-not-showing-in-layout>. Acesso em: 15 de mar. 2021.
FITZPATRICK, M. Packaging PyQt5 & PySide2 applications for Windows, with
PyInstaller. Learn PyQt. Disponível em: <https://www.learnpyqt.com/tutorials/
packaging-pyqt5-pyside2-applications-windows-pyinstaller/>. Acesso em: 15 de mar.
2021.
FITZPATRICK, M. The QResource System. Learn PyQt. Disponível em: <https:
//www.learnpyqt.com/tutorials/qresource-system/>. Acesso em: 15 de mar. 2021.
FOROGH, P. Python How to Create Media Player in PyQt5. Code Loop. Disponível em:
<https://codeloop.org/python-how-to-create-media-player-in-pyqt5/>. Acesso em: 15 de
mar. 2021.
FREEPIK. Mineral water. Flat Icon. Disponível em: <https://www.flaticon.com/
free-icon/mineral-water_1651824?related_id=1651824&origin=search>. Acesso em: 15
de mar. 2021.
FROSI, F. O. Jogos Digitais no Contexto Escolar: desafios e possibilidades
para a Prática Docente. Tese (Doutorado) Centro de Ciências Exatas e
Tecnológicas, Universidade do Vale do Rio dos Sinos (UNISINOS) São
Leopoldo, RS Brasil, IX SBGames - Florianópolis - SC, 2010. Disponível em:
<http://www.sbgames.org/papers/sbgames10/culture/full/full13.pdf>. Acesso em: 15 de
mar. 2021.
GEANY. Geany Download. 2005. Geany. Disponível em: <https://www.geany.org/
download/releases/>. Acesso em: 15 de mar. 2021.
Geoffrey Kater; Agro Bayer Brasil. Mel: como ele é feito. 2018. You Tube. Disponível em:
<https://www.youtube.com/watch?v=PqFX-YD_BME>. Acesso em: 15 de mar. 2021.
GOD-THESUPREME. Science Icon. 2019. Deaviant Art. Disponível em: <https:
//www.deviantart.com/god-thesupreme/art/Science-Icon-811074506>. Acesso em: 15 de
mar. 2021.
GRAFIKAZPAZUREM. Ícone de Fe2O3, óxido de ferro (III) ou óxido férrico
ícone - Ilustrão em Alta Resolução. 2018. I Stock Photo. Disponível em: <https:
//www.istockphoto.com/br/vetor/%C3%ADcone-de-fe2o3-%C3%B3xido-de-ferro-ou-%
C3%B3xido-f%C3%A9rrico-%C3%ADcone-gm900654096-248486500>. Acesso em: 15 de
mar. 2021.
Referências 221
HARIS. Clickable Qlabel How to use inside Designer. 2015. Stack Over-
flow. Disponível em: <https://stackoverflow.com/questions/31041358/
clickable-qlabel-how-to-use-inside-designer/31042404>. Acesso em: 15 de mar.
2021.
HELTONBIKER. How do I compile a PyQt script (.py) to a single
standalone executable file for windows (.exe) and/or linux? 2011. Stack
Overflow. Disponível em: <https://stackoverflow.com/questions/5888870/
how-do-i-compile-a-pyqt-script-py-to-a-single-standalone-executable-file-for>.
Acesso em: 15 de mar. 2021.
HONEY, M. A.; HILTON, M. Learning Science Through Computer Games and
Simulations. Tese (Doutorado) The National Academies of Sciences, Engineering,
and Medicine, Washington, DC: The National Academies Press, 2011. Disponível em:
<https://www.nap.edu/catalog.php?record_id=13078>. Acesso em: 15 de set. 2020.
INOSíVEL. How to center text in a QLineEdit? [duplicate]. 2019. Stack
Overflow. Disponível em: <https://stackoverflow.com/questions/55880028/
how-to-center-text-in-a-qlineedit>. Acesso em: 15 de mar. 2021.
JOHN. facebook play button png clip art - white video play butto PNG image with
transparent background. 2019. Top Png. Disponível em: <https://toppng.com/
facebook-play-button-png-clip-art-white-video-play-butto-PNG-free-PNG-Images_
162527>. Acesso em: 15 de mar. 2021.
JUHELE. Salt shaker PNG icon(#65045). 2018. Icons Png. Disponível em:
<https://www.iconspng.com/image/65045/salt-shaker>. Acesso em: 15 de mar. 2021.
K., M. Using a custom PySide2 widget in Qt Designer. 2018. Stack
Overflow. Disponível em: <https://stackoverflow.com/questions/52128188/
using-a-custom-pyside2-widget-in-qt-designer>. Acesso em: 15 de mar. 2021.
KOAN. Qt Stylesheet for QMessageBox. 2011. Stack Overflow. Disponível em:
<https://stackoverflow.com/questions/5104257/qt-stylesheet-for-qmessagebox>. Acesso
em: 15 de mar. 2021.
MSFRIESE. Creating pyinstaller from my script, missing PySide2.QtXml in the result.
2018. Stack Overflow. Disponível em: <https://stackoverflow.com/questions/50580039/
creating-pyinstaller-from-my-script-missing-pyside2-qtxml-in-the-result>. Acesso em: 15
de mar. 2021.
NASA. What Causes Air Pollution? Climate Kids. Disponível em: <https:
//climatekids.nasa.gov/air-pollution/>. Acesso em: 15 de mar. 2021.
NAUTILIUS. Pyinstaller and –onefile: How to include an image in the exe file. 2015.
Stack Overflow. Disponível em: <https://stackoverflow.com/questions/31836104/
pyinstaller-and-onefile-how-to-include-an-image-in-the-exe-file>. Acesso em: 15 de mar.
2021.
NIKHILAGGARWAL3. __init__ in Python. 2019. Geeks for Geeks. Disponível em:
<https://www.geeksforgeeks.org/__init__-in-python/>. Acesso em: 15 de mar. 2021.
Referências 222
Nova Vida Filtros. Você Sabia? Nova Vida Filtros. Disponível em: <http:
//novavidafiltros.comunidades.net/voce-sabia>. Acesso em: 15 de mar. 2021.
ORENSBRULI. Custom QWidget setStyleSheet not working - Python.
2019. Qt Forum. Disponível em: <https://forum.qt.io/topic/100691/
custom-qwidget-setstylesheet-not-working-python/5>. Acesso em: 15 de mar.
2021.
OXINOXI. Ilustrão co2 do modelo do átomo do dióxido de carbono - Ilustrão em
Alta Resolução. 2019. I Stock Photo. Disponível em: <https://www.istockphoto.com/
br/vetor/ilustra%C3%A7%C3%A3o-co2-do-modelo-do-%C3%A1tomo-do-di%C3%
B3xido-de-carbono-gm1184910947-333732359>. Acesso em: 15 de mar. 2021.
PARK, H. How to add a QVideoWidget in Qt Designer? 2017. Stack
Overflow. Disponível em: <https://stackoverflow.com/questions/47259825/
how-to-add-a-qvideowidget-in-qt-designer>. Acesso em: 15 de mar. 2021.
PETRROUDNY. Modelo vetorial de substância química. Ícone da molécula de cloreto
de dio comumente conhecida como NaCl salgada consistindo de dio e cloreto.
Fórmula estrutural com ligação dupla isolada em branco - Ilustrão em Alta Resolução.
2020. I Stock Photo. Disponível em: <https://www.istockphoto.com/br/vetor/
modelo-vetorial-de-subst%C3%A2ncia-qu%C3%ADmica-%C3%ADcone-da-mol%C3%
A9cula-de-cloreto-de-s%C3%B3dio-gm1285103180-382039129>. Acesso em: 15 de mar.
2021.
Py Installer. PyInstaller. 2005. Py Installer. Disponível em: <http://www.pyinstaller.org/>.
Acesso em: 15 de mar. 2021.
PYPI. PyQt5Designer 5.14.1. Pypi. Disponível em: <https://pypi.org/project/
PyQt5Designer/>. Acesso em: 15 de mar. 2021.
PYPI. PySide2 5.15.2. Pypi. Disponível em: <https://pypi.org/project/PySide2/>.
Acesso em: 15 de mar. 2021.
PYTHON. Making non-clickable widgets clickable. Python Wiki. Disponível em: <https:
//wiki.python.org/moin/PyQt/Making%20non-clickable%20widgets%20clickable>.
Acesso em: 15 de mar. 2021.
PYTHON. random Generate pseudo-random numbers. Python. Disponível em:
<https://docs.python.org/3/library/random.html>. Acesso em: 15 de mar. 2021.
QT. PySide2.QtCore. Qt. Disponível em: <https://doc.qt.io/qtforpython-5/PySide2/
QtCore/index.html>. Acesso em: 15 de mar. 2021.
QT. PySide2.QtGui. Qt. Disponível em: <https://doc-snapshots.qt.io/qtforpython-5.15/
PySide2/QtGui/index.html>. Acesso em: 15 de mar. 2021.
QT. PySide2.QtMultimedia. Qt. Disponível em: <https://doc.qt.io/archives/qtforpython-5.
12/PySide2/QtMultimedia/index.html>. Acesso em: 15 de mar. 2021.
QT. PySide2.QtWidgets. Qt. Disponível em: <https://doc.qt.io/qtforpython-5/PySide2/
QtWidgets/index.html>. Acesso em: 15 de mar. 2021.
Referências 223
QT. QCursor. Qt. Disponível em: <https://doc.qt.io/archives/qtforpython-5.12/PySide2/
QtGui/QCursor.html>. Acesso em: 15 de mar. 2021.
QT. QLabel. Qt. Disponível em: <https://doc.qt.io/archives/qtforpython-5.12/PySide2/
QtWidgets/QLabel.html#PySide2.QtWidgets.PySide2.QtWidgets.QLabel>. Acesso em:
15 de mar. 2021.
QT. QMediaPlayer Class. Qt. Disponível em: <https://doc.qt.io/qt-5/qmediaplayer.html>.
Acesso em: 15 de mar. 2021.
QT. QMessageBox Class. Qt. Disponível em: <https://doc.qt.io/qt-5/qmessagebox.html>.
Acesso em: 15 de mar. 2021.
QT. QObject Class. Qt. Disponível em: <https://doc.qt.io/qt-5/qobject.html>. Acesso
em: 15 de mar. 2021.
QT. QPixmap. Qt. Disponível em: <https://doc-snapshots.qt.io/qtforpython-5.15/
PySide2/QtGui/QPixmap.html>. Acesso em: 15 de mar. 2021.
QT. QRegExp Class. Qt. Disponível em: <https://doc.qt.io/qt-5/qregexp.html>. Acesso
em: 15 de mar. 2021.
QT. QRegExpValidator Class. Qt. Disponível em: <https://doc.qt.io/qt-5/
qregexpvalidator.html>. Acesso em: 15 de mar. 2021.
QT. QSignalBlocker Class. Qt. Disponível em: <https://doc.qt.io/qt-5/qsignalblocker.
html>. Acesso em: 15 de mar. 2021.
QT. Qt Designer’s Signals and Slots Editing Mode. Qt. Disponível em: <https:
//doc.qt.io/archives/qt-4.8/designer-connection-mode.html>. Acesso em: 15 de mar. 2021.
QT. Qt for Python & PyInstaller. Qt. Disponível em: <https://doc.qt.io/qtforpython/
deployment-pyinstaller.html>. Acesso em: 15 de mar. 2021.
QT. Slot. Qt. Disponível em: <https://doc.qt.io/archives/qtforpython-5.12/extras/
PySide.QtCore.Slot.html>. Acesso em: 15 de mar. 2021.
QT. The Style Sheet Syntax. Qt. Disponível em: <https://doc.qt.io/qt-5/stylesheet-syntax.
html>. Acesso em: 15 de mar. 2021.
QT. teste. QLineEdit Class. Disponível em: <https://doc.qt.io/qt-5/qlineedit.html>.
Acesso em: 15 de mar. 2021.
ROSSUM, G. van. Python Download. 1991. Python. Disponível em: <https:
//www.python.org/downloads/>. Acesso em: 15 de mar. 2021.
SIGNALPROCESSED. PyQt5: Creation of Windows with Classes [duplicate]. 2018.
Stack Overflow. Disponível em: <https://stackoverflow.com/questions/52377073/
pyqt5-creation-of-windows-with-classes>. Acesso em: 15 de mar. 2021.
SPANNBAUER, A. Intro to Multiple Inheritance super. 2019. Data
Camp. Disponível em: <https://www.datacamp.com/community/tutorials/
super-multiple-inheritance-diamond-problem?utm_source=adwords_ppc&utm_
campaignid=1455363063&utm_adgroupid=65083631748&utm_device=c&utm_
Referências 224
keyword=&utm_matchtype=b&utm_network=g&utm_adpostion=&utm_creative=
278443377095&utm_targetid=dsa-429603003980&utm_loc_interest_ms=&utm_loc_
physical_ms=1001710>. Acesso em: 15 de mar. 2021.
STOCKIO. Honey jar dipper icon. Stockio. Disponível em: <https://www.stockio.com/
free-icon/isabella-honey-jar-dipper>. Acesso em: 15 de mar. 2021.
T., O. Which QLabel was pressed by mousePressEvent. 2018. Stack Over-
flow. Disponível em: <https://stackoverflow.com/questions/50955182/
which-qlabel-was-pressed-by-mousepressevent>. Acesso em: 15 de mar. 2021.
USER7797. Why do stylesheets not work when subclassing QWidget and using Q_OBJECT?
2013. Stack Overflow. Disponível em: <https://stackoverflow.com/questions/18344135/
why-do-stylesheets-not-work-when-subclassing-qwidget-and-using-q-object/32889486#
32889486>. Acesso em: 15 de mar. 2021.
U/TLAZOLTEOTL. When is it necessary for a derived class to call the __init__ function
of its parent class? 2014. Reddit. Disponível em: <https://www.reddit.com/r/learnpython/
comments/2j1lx1/when_is_it_necessary_for_a_derived_class_to_call/>. Acesso em:
15 de mar. 2021.
VECTEEZY. Bee icon. Stockio. Disponível em: <https://www.stockio.com/free-icon/
nature-icons-bee>. Acesso em: 15 de mar. 2021.
VECTEEZY. Sunflower icon. Stockio. Disponível em: <https://www.stockio.com/
free-icon/nature-icons-sunflower>. Acesso em: 15 de mar. 2021.
VERSAFLOW. Python GUI Project Tutorial Part 04: Make a Subclass for Your UI
MainWindow. 2020. You Tube. Disponível em: <https://www.youtube.com/watch?v=
anXUc2d8xYI>. Acesso em: 15 de mar. 2021.
VISENTINI, V. A rusty iron support bar - Image ID: CTA14P. 2012. Alamy. Disponível
em: <https://www.alamy.com/stock-photo-a-rusty-iron-support-bar-49392918.html>.
Acesso em: 15 de mar. 2021.
W3 Schools. Python Lists. W3 Schools. Disponível em: <https://www.w3schools.com/
python/python_lists.asp>. Acesso em: 15 de mar. 2021.
ZAHI.MASHAEL. QVideoWidget vs QGraphicsVideoItem. 2017. Qt Forum. Disponível
em: <https://forum.qt.io/topic/81248/qvideowidget-vs-qgraphicsvideoitem>. Acesso em:
15 de mar. 2021.
ZIRAWAGA, V. S.; OLUSANYA, A. I.; MADUKU, T. Gaming in education: Using games
as a support tool to teach history. Journal of Education and Practice, Faculty of Applied
Science, Cyprus International University, Nicosia, Turkey, v. 8, n. 15, p. 55–64, 2017.
Disponível em: <https://iiste.org/Journals/index.php/JEP/article/view/37034>.